開源日報每天推薦一個 GitHub 優質開源項目和一篇精選英文科技或編程文章原文，堅持閱讀《開源日報》，保持每日學習的好習慣。
2024年1月10日，開源日報第1070期：
今日推薦開源項目：《excalidraw》
今日推薦英文原文：《The Top Accessibility Errors Found in 2023》
開源項目
今日推薦開源項目：《excalidraw》傳送門：項目鏈接
推薦理由：用於繪製手繪類圖表的虛擬白板：excalidraw可以使用excalidraw構建創建手繪圖、線框或任何你想繪製的東西，excalidraw具有以下功能：
- 📡 PWA支持（離線工作）
- 🤼 實時協作
- 🔒 端到端加密
- 💾 本地優先支持（自動保存到瀏覽器）
- 🔗 可共享鏈接（導出為只讀鏈接，您可以與其他人共享）
直達鏈接 excalidraw.com
英文原文
今日推薦英文原文：The Top Accessibility Errors Found in 2023
推薦理由： 2023年發現的最常見無障礙錯誤總結：無按鈕元素標籤：按鈕缺少可訪問標籤，使輔助技術用戶無法理解按鈕用途，無效aria-labelledby：aria-labelledby未正確引用文本元素的ID，使輔助技術無法連接控制項和標籤等等
The Top Accessibility Errors Found in 2023
TPGi』s accessibility experts have been busy this year, identifying thousands of accessibility errors through manual and automated testing. From all those results, the following 10 issues were the most commonly found by our ARC automation tools. We hope this list helps guide your team to avoid some of this year』s most common barriers. Cheers to another year of making things accessible!
1. No link text
The <a> element is HTML』s way of specifying links to other web pages, or locations within the same webpage, providing the foundation for the web』s purpose as a connected set of pages. But developers sometimes use the <a> element to provide other interactive functionality, and often this is done in a way that omits any link text. The result is that assistive technologies such as screen readers have no way to communicate the purpose of the link, leaving users unsure what will happen when they follow the link. That』s why every link must communicate its purpose in an accessible way.
Learn more about writing meaningful link text.
2. Non-active element in tab order
This error occurs when a non-interactive element has been placed in the tab order using tabindex="0", which means it becomes focusable using the keyboard when it doesn』t need to be, reducing efficiency and increasing effort for keyboard users. Generally, only elements that are interactive, such as links, buttons and form input fields, should be included in focus order. Screen reader users have access to a wide range of additional keyboard commands to allow quick navigation through content, so there』s no need to include static text and images in the focus order. Edit: In fact, all users who rely on keyboard navigation are negatively affected by this common error.
Learn more about keyboard interaction.
3. Missing link alt attribute
Closely related to item #1 in our list, often links are labeled with an icon or other graphic that visually indicates the purpose of the link. A common error is to provide this graphic without any text alternative. When an image link has no alternative text, assistive technology users will be unaware of the link』s purpose. For that reason, it』s essential to provide alternative text for image links, that describes the purpose of the link.
Learn more about all things 『alt』.
4. No alt text
Related to item #3, an image』s alternative text, provides a text description of the image content. When an <img> element lacks a text alternative, screen reader users have no way of knowing what the image is for. Providing a text alternative that communicates the same information as the image is one of the most fundamental accessibility requirements; but exactly what the alternative text should be would depend on the image』s purpose.
Learn about the five golden rules of compliant alt text.
5. List not nested correctly
Using markup to identify lists helps communicate the structure of page content in an accessible way. When a list item has a nested list, it』s important to use markup in the correct way to make the nesting relationships clear. This helps avoid confusion when the list structure is described by screen readers.
Learn more about HTML lists as a way to structure content.
6. Duplicate labels used
Another accessibility issue commonly detected by automated tools is form fields that have multiple identical labels. Having more than one label with exactly the same text can make it harder for some users to understand the form』s structure, and decide what content to enter in a particular field, increasing the chances of input errors. If your form has multiple labels with the same text, that』s a sign you might want to reconsider the design of the form or change the labeling of each input field.
Learn more about accessibility and labeling.
7. Positive tabindex value
The tabindex attribute is a way to control which elements on a web page receive keyboard focus. In the past, developers would use different values of tabindex to try to control the focus order through a page. However, this approach is very brittle and difficult to maintain, and today, the only values of the tabindex attribute that should be used are either 0 (see item #2 in this list for more on that topic) or, in specific situations where focus is managed using scripting, -1. To optimize keyboard usability, don』t try to control focus order using positive tabindex values.
Learn more about using the tabindex attribute.
8. Invalid aria-describedby
Sometimes, a control may need a description as well as a label, when users might need to know more details about the state or purpose of the control. The aria-describedby attribute can be used to provide a connection between a control and some descriptive text elsewhere on the page. But the ID value defined by aria-describedby must match an element on the page with the same ID, otherwise the connection between those elements will not be conveyed by assistive technologies.
Learn more about using ARIA attributes for labels and descriptions.
9. No label for button element
Similar to links without link text (item #1), a button without an accessible label does not convey its purpose to assistive technology users. Unfortunately, many buttons are implemented in a way that relies on visual icons, which means the user has to be able to see that icon in order to understand the button』s purpose. To avoid this problem, provide each control with an accessible label that clearly communicates its purpose to assistive technologies.
Learn more about label use in WCAG.
10. Invalid aria-labelledby
Very similar to item #8 on this list, in specific situations a control may be provided with an accessible label by connecting the control to some text elsewhere on a page. The aria-labelledby attribute can provide this connection, but it needs to correctly reference the text element』s ID, otherwise the connection between the control and its label is lost to assistive technology users.
Learn more about using ARIA in HTML correctly.
下載開源日報APP：https://openingsource.org/2579/
加入我們：https://openingsource.org/about/join/
關注我們：https://openingsource.org/about/love/
