UI OptionsObjectiveEasily add UI Options to your website. Add a simple separated-panel preferences editor to any page.DescriptionUI Options adds a simple preferences editor dialog with a set of six panels in a collapsible panel at the top of the page, accessible through a button in the upper right corner of the page.
An introduction to web accessibility. Tips on how to improve the accessibility of your web sites and apps with CSS.
… a lot of things have changed and CSS now gives us an incredible set of tools to style the web. We went from Verdana to Webfonts, from fixed widths to Responsive Web Design, from table-based layouts to Grid, and we don’t have to use images anymore for borders, fonts or shadows. We have custom properties, Feature Queries, calc() and numerous new units. This of course is only a subset of the great developments of the last years.
While this wide range of properties and endless ways of solving tasks with CSS makes our lives easier, it also creates the potential to worsen the experience for our users. It’s actually possible to make a website inaccessible in just three lines of CSS.
In this post I’ve collected techniques, considerations and approaches that will help you write more accessible CSS. The collection starts with basic concepts and well-known properties and covers some of the newer stuff at the end.
In the end it got way bigger than expected, so here’s a handy menu so you can jump directly to a section that interests you the most:
- From legible to readable text
- Using content in pseudo elements cautiously
- The screen is not the only medium
- Fallback for property values with incomplete support
- There are many ways to hide content
- You can’t trust bad contrast
- Color alone should not be the only source of information
- Taking care of order
- Focus on what’s important: focus
- Grid and flat document structures
Curated by (Lifekludger)
Read full article at Source: Writing CSS with Accessibility in Mind – Manuel Matuzovic – Medium
A beginner’s guide to web accessibility
ARIA Landmark Roles are helpful landmarks that can be used by AT to navigate a website.
Note: When you validate html using landmark roles, you’ll receive a warning stating these roles are redundant. In HTML5, several of the landmark roles are implicit via the native structural element which is supported by most modern desktop browsers with the exception of IE and iOS Safari. So, if you support IE and iOS browsers, you’ll want to use the landmark roles. For more information, read Quick Tip: Aria Landmark Roles and HTML5 Implicit Mapping.
There’s a lot of neat tricks in this video by Rob Dodson where he focuses on accessibility tricks in Chrome’s DevTools. A few notes:
- Chrome DevTools has an experimental feature to help with accessibility testing that you can unlock if you head to
chrome://flags/and turn on in the DevTools settings.
- Wrapping an
<input type="checkbox">in a
<label>gives the input a name of the text in the label, even without a
aria-labelledbyattribute overrides the name of the element with the text taken from a different element, referenced by ID. It can even compose a name together from multiple elements, including itself.
tabindex='0'to an element will make it focusable.
In this post, I’ll cover the basics of accessibility design, what it is, what it aims to solve, and steps you can take to get started. Note, this is an incredibly detailed subject, and it will take months or years of practice to fully understand. But the benefits are worth the effort, and all of your web projects will leave every visitor with a lasting impression of accessible content.
Intro To Accessibility
Generally speaking, accessibility is the idea of building content so that it can be consumed by anyone. This may include blind people who can’t read, and it may include people with physical disabilities who can’t operate a mouse or keyboard (or either).
But it can also include people with slight deficiencies in vision. It might include people with dyslexia or reading comprehension issues. In fact, the idea of “web accessibility” includes every possible impairment that might affect how someone interacts with or consumes a website.
Steps To Accessible Design
I highly recommend visiting the A11Y project website for practical accessibility tips. A11Y (which is also a numeronym) is a free open source project hosted on GitHub, offering techniques for accessible web design.
It’s difficult to learn all of this stuff and to implement it at the same time. Take it step-by-step, and be willing to research more if you get confused.
Check out the A11Y’s how-tos and quick tips for getting started. You’ll bump into specific suggestions like jump-to-content links and high-contrast color schemes. These techniques each have their own level of detail, so implementation is mostly about testing to see what works.
Curated by (Lifekludger)
Read full article at Source: Designer’s Guide to the Basics of Web Accessibility Design – Hongkiat