Tag Archives: css

Writing CSS with Accessibility in Mind

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 propertiesFeature Queriescalc() and numerous new units. This of course is only a subset of the great developments of the last years.

Writing CSS with Accessibility in Mind

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:

Curated by (Lifekludger)
Read full article at Source: Writing CSS with Accessibility in Mind – Manuel Matuzovic – Medium

HTML Source Order vs CSS Display Order

Last month in my post Source Order Matters I wrote about why we need to consider how the source order of the HTML of a page can affect users when the CSS re-orders the content visually. While I used a recipe as an analogue and cited WCAG conformance rules,I failed to provide specific examples. I prepared one for my talk at Accessibility Camp Toronto, but have since expanded on it with more examples.

I want to make sure that we all understand that the source order versus display order discussion is not unique to CSS Flexbox. It is not unique to CSS Grids. Many developers have been dealing with this (correctly and incorrectly) since CSS floats and absolute positioning were introduced (and even earlier with tabled layouts). As such, I have examples of each in this post (no tabled layouts).

Curated by (Lifekludger)
Read full article at Source: HTML Source Order vs CSS Display Order | Adrian Roselli

WebAIM: Accessible CSS

Introduction
Cascading Style Sheets, or CSS, allow you to modify characteristics of existing HTML elements. All web browsers have a built-in style sheet that defines the default styling for all elements. For instance, when the browser sees the tag, it knows to skip a line and start a new section because that’s what the built-in style sheet instructs it to do. The , and every other HTML tag is defined in this style sheet; their size, color, position, and other characteristics are all defined within it. When a page author defines their own styles, they can override this built-in style sheet and tell the browser to display elements in a different way.

Curated by (Lifekludger)
Read full article at Source: WebAIM: Accessible CSS

An Introduction to the Reduced Motion Media Query | CSS-Tricks

The open web’s success is built on interoperable technologies. The ability to control animation now exists alongside important features such as zooming content, installing extensions, enabling high contrast display, loading custom stylesheets, or disabling JavaScript. Sites all too often inundate their audiences with automatically playing, battery-draining, resource-hogging animations. The need for people being able to take back control of animations might be more prevalent than you may initially think.

Although technology unintentionally inflicting adverse effects has existed before this, the popularity of iOS gave the issue prominence. Apple has great support for accessibility, so an option in the operating system preferences to disable motion effects for those with vestibular disorders was added in response.

#Vestibu-what?

Your vestibular system provides an internal sensor to communicate your body’s physical position and orientation in the world, and is key to controlling balance and eye movement.

Vestibular disorders can cause your vestibular system to struggle to make sense of what is happening, resulting in loss of balance and vertigo, migraines, nausea, and hearing loss. Anyone who has spun around too quickly is familiar with a confused vestibular system.

Curated by (Lifekludger)
Read full article at Source: An Introduction to the Reduced Motion Media Query | CSS-Tricks

An Introduction to the Reduced Motion Media Query | CSS-Tricks

A brief history of Reduced Motion

When it was released in 2013, iOS 7 featured a dramatic reworking of the operating system’s visuals. Changes included translucency and blurring, a more simplified “flat” user interface, and dramatic motion effects such as full-screen zooming and panning.

While the new look was largely accepted, some people using the updated operating system reported experiencing motion sickness and vertigo. User interface movement didn’t correspond with users’ feeling of movement or spatial orientation, triggering the reported effects.

Although technology unintentionally inflicting adverse effects has existed before this, the popularity of iOS gave the issue prominence. Apple has great support for accessibility, so an option in the operating system preferences to disable motion effects for those with vestibular disorders was added in response.

#Enter a new media query

Safari 10.1 introduced the Reduced Motion Media Query. It is a non-vendor-prefixed declaration that allows developers to “create styles that avoid large areas of motion for users that specify a preference for reduced motion in System Preferences.”

The syntax is pretty straightforward:

/* Applies styles when Reduced Motion is enabled */
@media screen and (prefers-reduced-motion: reduce) { }

@media screen and (prefers-reduced-motion) { }

Safari will parse this code and apply it to your site, letting you provide an alternative experience for users who have the Reduced Motion option enabled.

Curated by (Lifekludger)
Read full article at Source: An Introduction to the Reduced Motion Media Query | CSS-Tricks

Source Order Matters | Adrian Roselli

CSS is providing newer and more complex methods of laying out your pages. Given the multiple form factors a responsive site has to support, it makes sense that developers want easy ways to structure the layouts that aren’t all floats, clears and position: absolutes.

Regardless of how you want your layout to appear in a browser, you must keep in mind that a clear HTML structure is important to search engines. Sorry, while the bit about search engines is true, it’s not really what I consider important, but it is more likely to get some people to pay attention.

What I consider important are users of screen readers or any kind of assistive technology that allows a user to navigate a page by regions (typically by the Tab↹ key), as well as sighted keyboard users.

curated by (Lifekludger)
Read full article at Source: Source Order Matters | Adrian Roselli

How Our CSS Framework Helps Enforce Accessibility | eBay Tech Blog

An extremely well written detailed in-depth article.. nice to see.

A user interface control not only needs to look like a certain control, it must be described as that control too. Take for example a button, one of the simplest of controls. There are many ways you can create something that looks like a button, but unless you use the actual button tag (or button role – more on roles later), it will not be described as a button.

Why does it need to be described as a button? Users of AT (assistive technology), such as a screen reader, may not be able to see what the control looks like visually; therefore it is the job of the screen reader to describe it aurally. A screen reader, such as VoiceOver for Mac OSX and iOS, can do this job only if we, the developers, ensure the correct semantics are present in our HTML code.

Curated by (Lifekludger)
Read full article at Source: How Our CSS Framework Helps Enforce Accessibility | eBay Tech Blog

Diagnostic.css – Super quick web accessibility testing – Karl Groves

In my quest to make accessibility accessible, I’ve created a super-easy-to-use tool that people can use to do accessibility testing. If you can view the page in the browser, you can use this tool. Diagnostic.css is a CSS (Cascading Stylesheets) file which, when applied to a web page, will highlight accessibility errors in the page.

curated by (Lifekludger)
Read full article at Source: Diagnostic.css – Super quick web accessibility testing – Karl Groves