整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
HTML 中，ARIA 角色（Accessible Rich Internet Applications）是一種用于提高可訪問性的技術。ARIA 角色可以幫助屏幕閱讀器、鍵盤用戶和其他輔助技術正確地理解和導航網頁中的結構和交互元素。
ARIA 角色是一種用于描述網頁元素的方式，它可以讓輔助技術更好地理解元素的功能和行為。例如，使用 aria-label 屬性可以為無視力用戶提供元素的描述，使用 aria-labelledby 屬性可以將元素與其標簽相關聯，使用 aria-describedby 屬性可以為元素提供描述信息等。
ARIA 角色還可以幫助鍵盤用戶更方便地導航網頁，例如，使用 aria-expanded 屬性可以控制可折疊的菜單，使用 aria-haspopup 屬性可以指示元素包含彈出菜單等。
使用 ARIA 角色不僅可以提高網頁的可訪問性，還可以讓用戶體驗更好，因為它可以讓用戶更容易地理解和操作網頁中的各種元素。
標題: 實現 HTML 中的 ARIA Roles: 一個簡單示例
下面是一個使用 ARIA 角色的簡單示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example Page</title>
</head>
<body>
<h1>Example Page</h1>
<p>This is an example page with ARIA roles.</p>
<button aria-label="Open menu">Open menu</button>
<ul role="menu">
<li role="menuitem">Item 1</li>
<li role="menuitem">Item 2</li>
<li role="menuitem">Item 3</li>
</ul>
<p>This is some text that describes the menu.</p>
<button aria-expanded="true">Expand</button>
<ul role="menu" aria-expanded="true">
<li role="menuitem">Subitem 1</li>
<li role="menuitem">Subitem 2</li>
<li role="menuitem">Subitem 3</li>
</ul>
<p>This is some text that describes the submenu.</p>
</body>
</html>
在上述示例中，我們使用了 aria-label 屬性來為按鈕提供描述，使用 role="menu" 來定義菜單，使用 aria-expanded 屬性來控制菜單的展開狀態，同時還使用了 role="menuitem" 來定義菜單項。通過這樣的方式，我們可以讓屏幕閱讀器和鍵盤用戶更好地了解和操作網頁中的元素。
標題: 實踐中的 ARIA Roles: 提高可訪問性的關鍵技巧
實現 HTML 中的 ARIA 角色的關鍵技巧包括：
1. 正確地使用 ARIA 角色：確保每個元素都有正確的 ARIA 角色，以便輔助技術可以正確地理解元素的功能和行為。
2. 使用描述性 ARIA 屬性：使用 aria-label、aria-labelledby 和 aria-describedby 等屬性來提供元素的描述，以便于無視力用戶。
3. 控制可折疊的元素：使用 aria-expanded 屬性來控制可折疊的元素，例如菜單。
4. 指定彈出菜單：使用 aria-haspopup 屬性來指定元素包含彈出菜單。
5. 提高鍵盤導航：使用 ARIA 屬性來提高鍵盤用戶的導航體驗，例如使用 tabindex 屬性來定義元素的焦點順序。
通過正確地使用 ARIA 角色和屬性，我們可以讓網頁更具可訪問性，同時也讓用戶體驗更好。
為一名 7 年多的前端開發者，我從未想過我的工作需要具有可訪問性，直到最近才領悟。
是的，我們確實提供了帶 alt 標簽的圖片，并使用 header、footer、main、aside、nav 和 section 標簽......就是這些，大多數人止步于此。我們中的一些人仍然使用帶 class 的 div 作為這些特定的布局元素。為什么？因為我們不知道。
我們這樣做不是任何人的錯，除了少數，這個領域的大部分人都是被推到這個坑里謀生的，多數又在坑里一遍又一遍地做著同樣的事情，到最后還在想我到底在做什么。
直到有必要改變。
也許這種需要會以啟蒙的形式出現，順便說一句，啟蒙很少發生，更有可能是將正確的行業可訪問性規范從開發團隊的指導方針變為強制性的要求。
后者可能是你我所處的境況。好了，閑聊結束，我們直奔主題。
注意：不適用于高級前端技術人員，我沒有詳細介紹可訪問性，只想制定一個簡單的指引，可以在所有項目中遵循，類似于需要注意的事項清單。
如果你發現任何錯誤，請隨時指出，我會盡快糾正。
以下是我們在開發任何前端時需要注意的事項：
有一種叫做 ARIA 地標的東西，它能簡單地將網頁劃分為不同的地標，使屏幕閱讀器更容易在網頁內部導航。
當前這是不需要主動思考就能實現的，因為我們可能在不知不覺中就這么做了，即“默認情況下，HTML 分區元素定義了 ARIA 地標”。
這意味著正確地使用 HTML 分區元素，像<header>、<main>、<nav>、<footer>、article>、 <nav>等，而不要使用<div class="header">。
請查看ARIA實踐，可以更深入地學習。
屏幕閱讀器瀏覽網頁的另一種方式是使用標題。
使用標題是展示文檔結構的一種方式，如果只是設計上要顯示大字體或粗體，則不要使用它。
考慮一個沒有 h1 頁面的場景，當屏幕閱讀器讀到這樣的頁面時，用戶是無法獲知標題的，而頁面的標題通常是用<h1>表示。
在這種情況下，為了提高可訪問性，你可以做兩件事：
當我們需要在網頁上隱藏某些內容時，有以下幾個選項：
選項 1 和 2 不可行，因為它們使元素從 DOM 中完全刪除了，屏幕閱讀器也不可用，隱藏屬性也不行，這等同于“display: none;”。
參考用下面的樣式類來隱藏你的元素：
.sr-only {
clip: rect(0 0 0 0);
clip-path: inset(100%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}復制代碼
我們需要了解的是，不是所有的用戶都使用鼠標來瀏覽網頁，有些只使用鍵盤導航，還有一些使用屏幕閱讀器。對這些用戶來說，從網頁的一個部分到另一個部分，可能不像使用鼠標操作的人那么簡單。
我們考慮下面的場景：
假設我們有一個博客，在文章的列表頁上，一篇文章如下所示：
它有一個縮略圖、一個標題、一個描述和一個“閱讀更多”的按鈕，這是幾乎所有博客文章的通用模板。那么，我們是如何鏈接到詳情頁呢？
我們將縮略圖做成一個鏈接(link 1)，接著是標題(link 2)，然后是“閱讀更多”按鈕(link 3)，這 3 個鏈接都指向同一個頁面。
因此，當我們使用屏幕閱讀器或鍵盤瀏覽頁面時，我們必須用 tab 鍵按 3 次才能跳轉到下一篇文章。
這當然得避免，也很簡單。對冗余的鏈接，可以添加以下屬性：
首先，在設計中有按鈕時，應使用<button>元素，不要使用<div>等其他元素，再將樣式設置為按鈕的樣子，我知道我們這樣做已經很久了，但是時候改變了。
原因正如 HTML 語義部分所述，原生元素有很多內置的 ARIA 特性。
盡管用<div>和<button>做出來的按鈕對于大多數用戶來說，看起來是一模一樣的，但對于使用屏幕閱讀器的盲人用戶來說，它看起來非常不同，屏幕閱讀器甚至可能會忽略這是一個按鈕。
這里也有一些注意事項：
不設置按鈕樣式以及設置按鈕樣式的理想方法
針對于沒有任何文本、只有圖片的按鈕，可遵循以下三個步驟中的任何一個：
如果你有興趣，請查看這篇博文，了解更多關于上述步驟的詳情。
你用過以下代碼嗎?
:focus {
outline: none;
}復制代碼
當我們在網頁上按 tab 鍵時，看到的輪廓就是焦點指示器，通常我們用上面的代碼禁用它，至少我以前是這么做的。
這真是個糟糕的主意，焦點指示器能告訴使用鍵盤導航的用戶們他們當前正在交互的位置，如果我們移除焦點樣式，相當于將這些用戶置于黑暗中，隱藏焦點指示器就像隱藏鼠標光標。
因此，如果你刪除了默認的焦點樣式，那一定得添加自定義的焦點樣式。
在設置焦點指示器的樣式時，我們需要考慮以下幾點：
在下面的示例中，黑色顯示了焦點指示器啟用狀態(使用鍵盤 tab 時的樣式)：
設置焦點指示器樣式的不同方法
對比區 —— 顏色發生變化的地方
相鄰顏色 —— 與焦點指示器相鄰的顏色
聚焦狀態和非聚焦狀態的顏色對比度最小應為 3:1，焦點指示器和相鄰顏色之間也要符合這個規則。
意思是，如果你將一個白色背景頁上的綠色按鈕，設置的焦點指示器樣式為 2px 的黑色邊框，那么黑色和綠色、以及黑色和白色之間的最小對比度應該是 3:1。
如果你要覆蓋默認的焦點樣式，可使用以下代碼：
:focus {
outline: none;
}
button:focus {
/* some exciting button focus styles */
}
button:focus:not(:focus-visible) {
/* undo all the above focused button styles if the button has focus but the browser wouldn't normally show default focus styles */
}
button:focus-visible {
/* some even *more* exciting button focus styles */
}如果你有興趣，可以查看這篇博文了解詳情。
這對于使用語音命令瀏覽網頁的人來說很有用。大家有點難理解吧，我先解釋下為什么。首先，想想語音識別軟件是如何工作的：
以蘋果的 Siri 為例，我們先說一個關鍵句：“Hey Siri”，然后再說想要執行的命令。
比如：“Hey Siri，現在幾點了?”
同理，想象一下用 Siri 瀏覽網頁：
假設有一個按鈕叫“發送”，我們可以說：”Hey Siri，點擊發送按鈕”。這很簡單，對吧?
但是如果按鈕只有一個圖標，而沒有“發送”標簽，你要如何告訴 Siri 點擊哪個按鈕呢?
因此，盡可能提供視覺標簽，如果不行，那至少讓它可通過 tab 使用。
當 SVG 用于圖表等信息圖或其它類型的數據表示時，通常不會為可訪問用戶提供任何信息。為了方便他們，最好的方式是提供屏幕閱讀器能夠讀取到信息圖文本描述。
下面示例實現這類 SVG 的好方法：
<object
role="img"
aria-label="Average something of something"
aria-describedby="something_desc"
data="some.svg"
type="image/svg+xml"
>
<!-- fallback -->
<p id="something_desc">90% increase in number of sales in the year 2022 with proper SEO tactics implemented as to no SEO done for the previous year.</p>
</object>一份可以立刻行動的匯總清單：
可訪問性就像是一片海洋，我只觸及了表面。希望通過本文，能夠為我們大多數人照亮一個潛在的黑暗區域。
我所寫的一切都基于Sara Soueidan的博客和談話，請訪問她的博客了解更多信息。她有許多很酷的話題，非常地深入淺出。
原文鏈接：Frontend accessibility. Doing it the right way.
了解更多軟件開發與相關領域知識，點擊訪問 InfoQ 官網：https://www.infoq.cn/，獲取更多精彩內容！
先，我們先來看自 Nuxt 創建以來的一些統計數據：
Google Analytics
GitHub
NPM
新版本的主要變化：
光是這一改進就值得專門寫一篇文章進行介紹：
其他變化：
遷移提示：用戶不需要修改項目中的任何一行代碼，升級到 Nuxt 2 后，一切都將神奇般地自動幫你遷移完畢。
Nuxt 2 仍然存在 vendors 塊，但會自動處理它，而且效率更高。從這個版本開始，不再使用 CommonsChunkPlugin，所以用戶不必在項目中顯式定義 vendors。Nuxt 會自動將核心軟件包（vue、vue-router、babel-runtime 等）添加到指定的 Cache Group 中，這有助 Webpack 以最有效的方式拆分代碼。
遷移提示：從 nuxt.config.js 中刪除 vendors。如果你的項目中包含了 vendors，可以安全地刪除它們。如果你是模塊作者，可以保留 this.addVendor() 為舊版本提供支持。下一版本可能會顯示棄用警告。
Nuxt 嘗試提供開箱即用的最有效的代碼拆分功能，不過，現在用戶可以通過 build.splitChunks 選項來完全控制代碼拆分，并可以選擇性地禁用路由的異步塊。
重大變更：默認情況下，Nuxt 不再拆分布局塊。它們將與主入口點一起加載，就像 Nuxt Core、Plugins、Middleware 和 Store 一樣。用戶可以通過 build.splitChunks.layouts: true 來啟用布局拆分。另外，為了更好地控制 Webpack 塊拆分，可以使用 build.optimization.splitChunks 選項。
重大變更：對于生產版本的構建，不再使用文件名作為塊名稱的一部分（/_nuxt/pages/foo/bar.[hash].js 變成了 [hash.js]）。用戶可以使用 build.optimization.splitChunks.name：true 強制恢復啟用文件名稱（如果未指定，在 dev 和 --analyze 模式下仍然會啟用文件名稱）。
重大變更：為了減少異步請求，Webpack 默認不拆分運行時（manifest）塊，并將其移到主塊中。用戶可以通過 build.optimization.runtimeChunk：true 來啟用運行時拆分。
注意：Nuxt 的默認設置是以一些最佳實踐為基礎，并基于實際項目的基準測試進行了優化。建議用戶在每次做出更改后使用 nuxt build --analyze 分析 bundle。
遷移提示：保持默認設置。對你的實際項目進行基準測試，然后根據你的需要精心定制配置選項。
Vue Loader 15 和 mini-css-extract-plugin**
vue-loader（https://vue-loader.vuejs.org/en/）可以將.vue 文件解析為可運行的 JS/CSS 和 HTML。Vue-Loader 15 使用完全不同的新架構進行了重寫，可以將主 Webpack 配置中定義的任何規則應用于 *.vue 文件中的語言塊。
對于 CSS 提取，使用了一個新的插件 mini-css-extract-plugin，它支持按需加載 CSS 和 SourceMaps（CSS 拆分），并且是基于 Webpack v4 的新功能（模塊類型）而構建。
因為這兩個插件都是新的，所以預計在最終發布 2.0.0 版本之前，可能會出現一些不一致。這兩個插件已經在不同場景中進行了全面測試，它們表現得非常好！
現在用戶可以通過 std/esm（https://github.com/standard-things/esm）在 nuxt.config.js 中導入和導出 Middleware 和模塊中。std/esm 是一個快速、生產就緒、零依賴的軟件包，用于在 Node 6+ 中啟用 ES 模塊。
開發者需要優雅的開發經驗來開發出色的軟件，于是 Nuxt 團隊重新設計了很多有關 CLI 的東西。
在使用 nuxt dev 時，即使 CLI 顯示 Nuxt 已準備就緒，用戶仍然可能感覺到構建延遲。這是因為運行了兩次 Webpack。一次是為客戶端，一次是為 SSR 捆綁，但第二次運行被隱藏起來。現在構建被并行化，同時開發了 WebpackBar（https://github.com/nuxt/webpackbar），可以查看構建進度，還有其他很多功能。
現在，默認情況下隱藏所有調試消息（可以通過設置環境變量 DEBUG = nuxt:* 來啟用），同時為構建器和生成器更智能、更好地顯示消息。
用戶經常要求 Nuxt 支持測試和 CI（持續集成）環境。Nuxt 2 將自動檢測 CI 和測試環境，并切換到 minimalCLI 特殊模式，在該模式下包含較少的打印消息。
這個特性將在 Webpack 5 中正式發布，不過用戶現在可以通過 options.build.cache: true 來啟用 cache-loader 和 Babel 緩存，以及通過 options.build.parallel: true 來啟用 thread-loader。
Nuxt.js 是 Vue.js 開發人員的通用框架，它既可以用于全局環境（與服務器端渲染一起），也可以用于客戶端（單頁應用程序，SPA）。Nuxt 重新設計了與 SPA 有關的一些重要方面。
SPA 最重要的組件之一是頁面加載指示器。Nuxt 團隊對其進行了重新設計，如果出現任何問題，就會進入錯誤狀態，并在大約 2 秒后自適應地顯示在 DOM 中。如果 SPA 應用程序加載足夠快，可以避免不必要的屏幕閃爍。還添加了 aria 標簽，幫助屏幕閱讀器和搜索引擎正確檢測啟動畫面。
出于 SEO 方面的原因以及支持 HTTP2 推送，SPA 模式使用特殊的 Meta 渲染器將 nuxt.config.js 中定義的所有元標記添加到頁眉中。同時還為 SPA 模式添加了 options.render.bundleRenderer.shouldPrefetch 和 options.render.bundleRenderer.shouldPreload。
重大變更：默認情況下禁用 shouldPrefetch。很多用戶反應存在不必要的頁面塊預取，尤其是在中型項目中。此外，為了方便調試，非生產模式下默認禁用所有不必要的資源提示。
create-nuxt-app
create-nuxt-app 是 Nuxt 官方的腳手架工具，用于生成各種模板，如項目啟動模板、Express 模板等。有了 create-nuxt-app，用戶可以選擇與服務器端框架（如 Express、Koa、Adonis 等）集成，或者與 UI 框架（如 Vuetify、Bootstrap、Tailwind 等）集成，或者也可以使用 axios 模塊。
現在你可以更快地創建一個 Nuxt 新項目了。
遷移指南
用戶可以通過 yarn add nuxt@^2.0.0 或 npm install nuxt@^2.0.0 進行升級。下面是完整的遷移步驟指南：
參考鏈接
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
