From deaa6c3356e282060ebd4d67981dcd98457df76e Mon Sep 17 00:00:00 2001 From: Bryan C Guner Date: Tue, 16 Aug 2022 12:16:58 -0400 Subject: [PATCH] =?UTF-8?q?Create=20Blog=20=E2=80=9Cweb-accessiblity?= =?UTF-8?q?=E2=80=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/blog/web-accessiblity.md | 45 ++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) create mode 100644 src/pages/blog/web-accessiblity.md diff --git a/src/pages/blog/web-accessiblity.md b/src/pages/blog/web-accessiblity.md new file mode 100644 index 0000000000..417f5fb8f5 --- /dev/null +++ b/src/pages/blog/web-accessiblity.md @@ -0,0 +1,45 @@ +--- +title: Web accessiblity +template: post +date: 2022-08-16T16:15:47.770Z +image: /blog/28b10adb-7a99-4ef1-ae2a-4a74484fc50d.jpeg +image_position: right +author: src/data/authors/backup.yaml +show_author_bio: false +cmseditable: true +--- +The focus of web accessibility is often on web development – the things that happen in HTML, CSS, or JavaScript. Optimal accessibility should start much earlier, as part of the visual design process. This infographic highlights many important principles of accessible design. +Infographic +Web Accessibility for Designers infographic with text description below +Text Version +Plan Heading Structure Early +Ensure all content and design fits into a logical heading structure. +Ensure Logical Reading Order +The reading order for screen reader users should align with the visual order. +Provide Good Contrast +Be especially careful with shades of orange, yellow, and light gray. Check your contrast levels with our color contrast checker. +Use True Text Instead of Images of Text +True text enlarges better, loads faster, and is easier to translate and customize. +Use Adequate Font Size +Small text is difficult for all users to see. Ensure text is optimally readable. +Remember Line Length +Don’t make lines too long or too short. +Make Sure Links are Recognizable +Distinguish links from body text using more than just color (e.g., underline). +Design Keyboard Focus Indicators +When navigating with the keyboard, the focused item must be visually distinctive. +Design a "Skip to Main Content" Link +A keyboard accessible link for users to skip navigation should be at the top of the page. +Ensure Link Text Makes Sense on Its Own +Avoid "Click Here" or other ambiguous link text such as "More" or "Continue". +Design Usable Widgets and Controls +Dialogs, tooltips, menus, carousels, etc. must be easy to use and accessible. +Use Animation, Video, and Audio Carefully +Provide play/pause buttons. Avoid distracting movement. +Don’t Convey Content Using Only Color +Users may override or may not be able to see differences between colors. +Design Accessible Form Controls +Ensure form controls have descriptive labels, instructions, and error messages. +Embed Code +You can embed this infographic into your own page by copying and pasting the following code: +