Category: Mobile

Addressing the struggles of making sites accessible and usable

Accessibility and Usability Vin Diagram

Credit: Unknown

 

A question was asked at an Accessibility Special Interest Group meeting along the lines of, “Do we have access to a report that shows all the accessibility issues for our sites?” A comment was then made, “I just don’t know where to start.” I immediately reflected back to when Erick Beck and I gave a presentation along with representatives from SiteImprove of the various components of the SiteImprove suite. The same type of question was asked during the Q&A section. I felt it was time to write an article to share with the entire web community on campus my thoughts on bringing every site into compliance making our sites usable.

Triage known issues

The first step I recommend is triaging known issues on all your sites collectively and establishing a plan. Start by looking at reports, whether in SiteImprove or another reporting tool, and find similarities or patterns. For example, if you notice a contrast ratio issue on all your reports and the same theme is used on each site, then a simple CSS fix to the theme and your theme’s source files will resolve the issue.

Identify teaching opportunities

If you see a lot of issues on alternative text, such as filenames used as alternative text, use it as a teaching moment. Send a polite email to your content contributors stating that you have noticed a lot of images added with the filename used as the alternative text. Provide simple steps to correct the issue and avoid mentioning the rules or policies associated with it. Please do not misunderstand me and think that I do not believe the accessibility rules and policies are not important. The rules and policies are important but, the idea here is to gingerly tell those who contribute content to the site to be mindful of certain things. We don’t want to beat them into the ground with the rule book.

Make the content usable

Instead of embedding an image containing paragraphs of text, tables and supporting images, make the image accessible by making it usable. We all agree that we want Google, Bing and any other search engine to index our site. Why should we then mask our content within an image? We want visitors to be able to find something on a page. Why should we put all our text in an object that can’t be searched? We want those looking at our site with a mobile device to read what we have to say without pinching to zoom in and out. Why include it in an image that scales automatically making the text difficult to see? Extract the content from the image and place it on the page so that everyone can read it making is usable and accessible.

Remember, the end goal is to have our sites accessible by making them usable. Try your best not to feel overwhelmed or frustrated.

  • Start by triaging the reported issues and establish a plan.
  • Identify the issues that pertain to a theme or template where one fix resolves the issue in several places.
  • Use your analytics to identify your top 25 or 50 most visited pages and resolve all the issues on those pages.
  • Work your way down to the fourth, fifth and sixth level pages eliminating the issues reported by your scanning tool.
  • Finally, you can review your site to check the tabbing order or if the appropriate landmarks are being used as both of these items need human interaction to verify they are within the guidelines.

Help is on the way!

Don’t be afraid to ask questions! The odds are high that someone has been in the same circumstance and can help you along the way. Join the accessibility sprint on July 14th where the goal is to bring people and technology together to improve the usability of our sites. This is a great opportunity to interact with others across campus who are also making updates that impact accessibility!

Web Technologies & Development at 2017 Tech Summit

2017 Texas A&M University System Technology Summit
Moody Gardens Convention Center, Galveston, TX
February 20-22

The Texas A&M University System Technology Summit is the place technology experts come to learn from the best, exchange ideas on common challenges and spend time together. Professionals have the rare chance to blend technical learning across a wide range of subjects. Tech Summit offers sessions to help you master your daily work, while enjoying a taste of island time. This year’s web track is full of valuable sessions:

Pre-conference workshops specific to web development are:

GoWeb After Dark

Equidox by Onix treats you to hors d’oeuvres and a complimentary first drink. Join the Texas A&M GoWeb group and end your day in a casual setting. Network with web professionals and discuss everything web, from the latest trends on analytics, accessibility and branding to recent successes and challenges.

Please check out the complete schedule and we hope to see you in Galveston!


Donald St. Martin
Track Chair, Web Technologies & Development

Mobility and Modern Web Conference

September 14-16, 2016

Los Angeles, CA

mmwcon.org/

MMWCon is about gathering educators, mobile enthusiasts, technologists, strategists, disruptors and innovators together to get a “glimpse” of what’s next and how we can get there together as a community and even a society. Attendees include mobile strategic thinkers, educators and instructional designers, researchers as well as entrepreneurs who want to connect with their peers and engage with the most interesting mobile and future tech innovations of our time.

Student Affairs IT Launches New Responsive Site

The Division of Student Affairs Department of Information Technology has just launched a new site. The site is based upon WordPress and uses a very popular theme called Avada by Themefusion, which is billed as the #1 selling WordPress theme in the world. We selected Avada primarily because it is very responsive. But also because the built-in theme feature set is so robust, that you can do almost any type of design without a large amount of custom CSS work. This makes it a good theme for our departmental customers who want to have a sharp looking site without having to wait for IT to mock it up. The site is also integrated into our departmental Twitter feed so stories go out via social media.

Mobile Use over the Thanksgiving Holiday

Luke W. tweeted a few stats from IBM over the Thanksgiving holiday that further emphasizes the importance of mobile-friendly sites.

Google will now label mobile friendly sites in mobile search

We have a new incentive for going mobile!

Earlier this week, Google announced a new mobile-friendly label to help users identify responsive and mobile sites at a glance from?their mobile device. ?To check if your site has the label, just search from your phone or tablet. You can also use Google’s Mobile-Friendly Test?to check your site and review the documentation in their Webmasters Mobile Guide.

Mobile friendly label used in a search result

More at the Google Webmaster Central Blog.

Source:?Google?via Digital Trends

 

Open Source Best Practices for Mobile Web Development

Google has put together an amazing resource for web developers, centered around responsive development. The great thing is, it?s open source. This means that experts from around the world have been collaborating to bring together a set of resources for web developers, and you can contribute too. The code for the project is all on GitHub.

The link to the resource is: https://developers.google.com/web/fundamentals/

The topics covered range from best practices for the look and feel of your site to optimizing performance for mobile devices.

If you work in the web and have some great resources of your own, go ahead and leave a comment.

5 Responsive Techniques for Your Responsive Headache – Part 1

Every developer and designer has those days that no matter what you try or imagine, it just doesn’t work for your responsive site. Your idea may be a?great solution for?mobile devices but, it is not as user-friendly on desktop and vice versa. ?You use all of your progressive enhancement knowledge and yes, it is functional but does it really meet the need of the user? ?Does it really fit with the flow of the site? At times, the answer is no.

Here are a few techniques and plugins that I have found that have helped cure my…well, responsive headache.

Tips for Retina View

The increased resolutions on newer smart phones, Retina Display to borrow Apple’s terminology, allow for much crisper images on the mobile view of our websites, but they cause problems for us as developers. ?There are several different methods for using these images, and most of them are rather cumbersome. ?It also makes the development more tiresome since you have to produce two images even in the development phase. ?We have found a few shortcuts in both areas.