Tag: RWD

Responsive Web Design(RWD) and it’s Accessibility-Part2

by

May 19, 2018

9:17 am

4 Comments on Responsive Web Design(RWD) and it’s Accessibility-Part2

ARIA, RWD

, , ,

This blog is continuation of Responsive Web Design(RWD) and it’s Accessibility-Part1

and let us understand how do we get those default accessibility benefits when RWD is done properly.

 

Key components of RWD:

There are 4 key components of RWD and they are

  1. View port
  2. Flexible layout
  3. Resizable images
  4. Media queries

 

View port

view port is nothing but it obtains your screen resolution and stores it. It is html 5 tag and it needs to be declared in the header of html. The syntax is as follows:

<meta name=view port>

We need to define few attributes here and they are:

  • width=devicewidth: This attribute helps to obtain the screen resolution
  • min value=1: This attribute helps web content to spread 100% within the container
  • max value=2: This attribute enables the zooming feature. user can zoom the content up to 200%
  • User zoom: if user zoom is set to no then user cannot zoom the content and therefore, always set user zoom to yes to enable the zoom feature

Accessibility implication

The accessibility implication is that user can zoom the web content in the small resolution as well

 

Flexible layout

Before we get into the flexible layout, let us understand the fixed layouts.

 

Don’t use fixed, inflexible layout

In the olden days, we used to have fixed layout websites because users to use to access the sites only in the desktops. Let us understand this with the simple hypothesis example.

There is a container with 500px. Out of this 500px, 150px in the left column is occupied with the 2 list items and 350px in the right column is occupied with the paragraph. This is fixed layout. When it is viewed in the desktop then it looks very beautiful. However, if this is viewed in the mobile device then it looks odd and the complete site is going to be broken with some horizontal scrolling and all. We can overcome this problem by using flexible layouts.

Do use flexible layout or flexible unit

Flexible layout is nothing but fixed layout becomes percentage layout and the content reflows as per the screen size and the site looks good. Let us take same hypothesis example.

Let us consider 500px container is 100%. The left column becomes 30% and the right column becomes 70%. How do we obtain this percentages. We have formula here. The formula is element unit/parent unit=relative unit. Here, for left column, 150/500=0.3*100=30%

When we see this site in the mobile then it looks beautiful with the content reflow vertically as per your screen size.

Accessibility implication

The accessibility implication is that the content will be reflowed vertically as per your screen size when user tries to zoom the web content

media queries.

Before we understand what is media queries, let us understand why we should not use breakpoints and why we should use media queries instead

Don’t use break points

We should not use breakpoints for each screen resolution. For example, we have got new devices in the market that has the 1024px and 1280px screen size. Do you think we need to have breakpoints for those 2 screen resolutions? Answer is that we should not instead we should use media queries with ranges

 

Do use media queries

Media queries are nothing but it will change your website layout as per the screen size when appropriate styles are defined. . Let us look into the different examples now.

mega menu in the desktop will get converted into hamburger menu in the mobile(which means you are changing the layout of your mobile web as per the screen size). the same mega menu will be spanned over into 2 different lines in the tablet view and it might be different in the portrait and landscape views. how does this is possible?

It is possible by using only media queries. We can define the media queries for particular resolution ranges. We should define the media queries for 3 ranges(small, medium, and large) along with custom styling and design.

  • Small-up to 500px with custom styles and design(phones)
  • Medium-from 500px to 1000px with custom styles and design(tablets)
  • Large-more than 1000px with custom styles and design(desktops)

If user’s device size match with any one of the above query criteria then the layout of the website is going to be changed accordingly.

Let us take the same 500px container as an example and define the styles in the media query that 2 column layout should convert into one single column layout one below other if it is viewed in the mobile site. When it is viewed in the mobile device that has screen size 400px then it will convert 2 single column layout into one single column layout. What does it do in the behind?

  • Check the users device size
  • Check device size 400px is matching to which query criteria

Here it matches to the 500px query criteria(in the small screen)

and apply those corresponding custom styles and design to web site. it would display 2 column layout  to one column layout. the content is not clutter and clear and hence, cognitive disability users would not get confused.

Accessibility implication

Accessibility implication is that cognitive disabilities would not get confused as The content is not cluttered and the content is clear

Resizable or flexible images

 

Do not use fixed images

Let us imagine we have 600px fixed image and we need to insert this 600px image in to the same above container 500px. When we inserted the big image into the small container then image is going to be broken and it is not viewable anymore. To avoid this problem one needs to use flexible or resizable images

Do use  flexible images

It is simple to use flexible images. We just need to avoid using the fixed height and width and start using the maxwidth=100%. When we use maxwidth=100% then 600px image will shrink or resize into the 500px container and looks beautiful. Similarly, when we are trying to insert small image into big container then our image is going to expand or resize as per the screen size and looks beautiful.

 

Accessibility implication

The accessibility implication is that image is viewable clearly without any loss even it is zoomed

Responsive Web Design(RWD) and it’s Accessibility-Part1

by

May 5, 2018

10:51 am

1 Comment on Responsive Web Design(RWD) and it’s Accessibility-Part1

RWD

, ,

What is RWD

RWD refers to responsive web design and RWD is coined by Ethan Marcotte. RWD is nothing but crafting your website as per the screen size. We don’t need to build many websites for the different screen sizes. For an instance, it is not necessary to build separate websites for desktop, mobile, and tablet views. If site is responsive then it is all one single website and website adopts as per the size screen. This is the beauty of RWD and having one single website for all the possible screen sizes reduces the maintainers cost too.

can RWD be good for accessibility?

When we make RWD properly then we would get default accessibility benefits. Let me put it in other way. If you are focusing to build responsive website then some of the accessibility issues would be taken care automatically. what are those default accessibility benefits? or what are those accessibility issues that are being taken care on the fly?, will discuss them in details in the coming sections. For now, just remember, we would get default accessibility benefits if RWD is done properly. We would also discuss in the coming sections how do we achieve those benefits by using responsive techniques such as view port, fluid or flexible layout, resizable images, and media queries.

What is the commonality between accessibility and responsive web design

Can you think of any commonality between RWD and accessibility? There is a commonality. Let me explain that. RWD is talking about how good or how well your site is going to be fit/adopted to different devices such as mobile, tablets and so on.. in a way, RWD is targeting to reach out as many as users who are accessing the site in the different devices. Accessibility is talking about providing an equal opportunity for all the users including people with disability. In a way, it is targeting to reach as many as users to access the web. To conclude, the commonality between them is that reaching out as many as users in both RWD and accessibility.

 

Accessibility Benefits of RWD

RWD principles benefit to people with disability to access desktop and mobile websites. What are those benefits? The following are the default benefits when RWD is done properly..

  1. Visually impaired:
  • Users can understand and navigate the content easily as the content in the mobile web pages is less
  • RWD follows certain standards and it is good for assistive technologies. Assistive technologies exposes the name, role, and value of standards or standard controls  properly/appropriately than custom controls

 

  1. Low vision:
  • Users can zoom the content even in the small resolutions without horizontal scrolling
  • Users can magnify the images and get optimum experience in all the screen sizes
  • This is not related to low vision specific but it is in general. Responsive sites are readable in all the screen sizes without further zooming

 

  1. Motor disability:
  • Users can accomplish task quickly as the content and navigation is stream lined
  • The touch target size is large enough and users can touch in the expected areas appropriately

 

  1. Cognitive disability:
  • The content is clear and not clutter and hence, cognitive disability users would not get confused

 

Accessibility and RWD:

If your site is responsive then do you think your site is completely accessible? Answer is no. Both RWD and accessibility are complement to each other. However, it does not mean that if you make responsive site then entire site is going to be accessible. Let us see few scenarios in which the type of accessibility issues that we get although your site is responsive

  1. Hamburger menu-all the menu items in the mega menu are visible in the desktop world. However, the same menu items get collapsed into one single hamburger menu. The state of hamburger menu to be exposed to the screen readers. This is accessibility violation and it can be fixed by using some aria techniques but nothing to do how well you are done RWD
  2. Focus management-when hamburger menu is clicked in the above scenario then focus is not moved to the newly displayed content and focus is moved to somewhere else. It is accessibility violation and nothing to do with RWD. Sometimes, hidden controls get focused during tab or swipe navigation and those hidden controls should not be in the focus order. Always, focus order should match with visual order.
  3. Focus visible: as the user navigates on the screen by using swipe and tab navigation, there should be visible focus for the element that user navigated to, so that users can understand where they are
  4. Reading order: in the responsive sites, hidden content is exposed to the screen readers sometimes. Reading order should match with visual order. This is accessibility violation and nothing to do how well you are done RWD
  5. Color contrast: the color contrast between background to foreground should be 4.5:1 in all the platforms

 

These are simple examples to make you understand what type of accessibility issues we may encounter although your site is responsive. Let us get into the our actual focus and it is how do we achieve those default accessibility benefits when RWD is done properly. To continue reading, visit part2 of this post.