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