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!
2017 Texas A&M University System Technology Summit
Moody Gardens Convention Center, Galveston, TX
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
October 25-28, 2016
The EDUCAUSE Annual Conference is the premier convening of IT professionals and technology providers across the diverse higher education landscape. The conference creates networking opportunities for colleagues to share ideas regarding strategies, leading change, effective processes, what’s working, and sometimes—more importantly—what isn’t.
October 16-19, 2016
HighEdWeb is the annual conference of the Higher Education Web Professionals Association, created by and for all higher education Web professionals—from programmers to marketers to designers to all team members in-between—who want to explore the unique Web issues facing colleges and universities.
Static website generators have been gaining popularity for a couple years now. Mathias Biilmann Christensen, CEO of Netlify (a static hosting platform), going so far as to claim, “Static website generators are the next big thing.” While this may be a bold statement given the popularity of WordPress and other dynamic CMS’s (Content Management Systems), he does give some very good reasons why going static may be the way of the future.
Dynamic sites can be overly complex and at risk to exploits, and the performance benefit of a static site is a no brainer. Most dynamic sites get around this with caching, but Mathais says, “Even with a highly optimized dynamic website, the static version is more than six times as fast on average!” Static sites also have the potential of taking advantage of a CDN (Content Delivery Network), which improves performance based on your location. Use this tool to test a website’s performance around the world!
One enterprise level CMS used by many in the A&M system is Hannon Hill’s Cascade CMS. In a lot of ways, Cascade is very similar to a static website generator (but at risk of causing controversy I won’t go so far as to call it one). When a user publishes a page in Cascade, it places static HTML files on a server for the website. What Cascade gives users, that a lot of the more modern static site generators don’t, is a backend for content editing with a standard WYSIWYG (What You See is What You Get) editor. The College of Architecture is in the process of moving our websites from a dynamic CMS into Cascade and the chart below shows the immediate performance improvements we have gained.
This chart comes from Google Webmaster tools. We switched the site (creativity.arch.tamu.edu) over to Cascade CMS on January 28th.
There are pros and cons to both dynamic and static site generators. Depending on the requirements of a project, one may be better suited than the other. Use the comments section to share your experiences, and join the conversation on Slack.
How will you know how effective your new responsive site is? You’ve spent hours sweating over bootstrap files and workflow mockups, but all your work could be for naught if you haven’t planned for the post-mobile world as Jeff Eaton, Senior Digital Strategist at Lullabot, presented at last year’s Drupal Conference in Portland, Oregon, “Building for a Post-Mobile World.”
Mobile is not a new trend. Review the stats Texas A&M GoMobile team provided. 75% of Texas A&M students connect to the Internet via cell phone. Outside our campus, Eaton states that 47% of adults use their phone for Internet browsing, while 15% use their phone as the primary or sole source for Internet browsing.
If your site is not accessible on a mobile device, there is a good chance you are missing out on valuable user traffic which could mean declining admission rates, research funding or donor support. But, just creating a mobile site is slapping a band-aid on a larger problem: your site’s content.
“People don’t want different content or less content [on mobile sites]. They imagine that their devices are different windows on the same content, and we don’t get to choose how people view our stuff.” Karen McGrane, A List Apart
Not that mobile design isn’t important — it is. Creating a site that is easy to navigate and read is paramount to maintaining your user base. However, if you have a site with no content, then you have no site at all.
Eaton suggests that instead of focusing on the end published version, we should look at our content as pieces with purpose. A page is not a single element but a group of elements with various levels of importance to your end users.
Knowing what content your to present on your site and what your users are searching for is the first step in creating a site that will survive the mobile apocalypse.
Watch his entire presentation on YouTube.
The Department of Information Technology in the Division of Student Affairs has partnered with Fish Camp and Big Event to harness the power of responsive web design for the custom applications they support for these organizations.
The Big Event is first organization that DoIT implemented a responsive web application for. The Big Event is a one-day service project where over 17,500 students volunteer to complete community service jobs for residents in the Bryan/College Station community. Last year the Big Event completed almost 1,650 jobs. During the very short kickoff period held in the parking lot of Reed, a representative from each group assigned to a job must register/check-in, receive their tool list, and turn in waivers for participants. You can imagine the challenge of networking 20 laptops in a parking lot. Until the last few years, they used wifi hotspots for accessing the web application that supports this process. To avoid wait times and long lines, the Big Event web application was modified to be responsive. This allowed Big Event staff to use their mobile phones to walk through the lines and check-in volunteers if the check-in tables started experiencing long lines.? The student director staff can also utilize the application to monitor the number of groups who have checked in to determine when to start the welcome program and kick-off.
The next student organization that DoIT worked with to implement a responsive web application is Fish Camp, a four-day extended orientation program which kicks off in August. Over 900 students must be checked in at Reed Arena on the first day of each session. Attendees check in at designated tables for their camp color which are staffed by camp counselors, who use bar code readers to scan the participants name tags and check them into the Fish Camp Registration system. The staff and students needed a real-time count of the number of students who had checked in and how many had not. DoIT worked with the organization to make the Fish Camp Registration web application responsive. This allows the Fish Camp student leaders to utilize their mobile phones to know when to begin their welcome activities. Another benefit of making the registration application responsive was that it now allows freshmen to register for Fish Camp with mobile devices. This has been a success; a majority of registrations last year were from mobile devices.
We have evangelized to you about using the “Responsive Web Design” for over two years now. We have done numerous presentations on: “Why Go Mobile”, “How to Go Mobile” and best practices. We have even done some basic training and given you templates to get you started with Responsive Web Design. So now what?
Well, we have one more option which would be beneficial for you. Prepare yourself for some engaging Responsive Web Design Conferences! These are events gather some of the top experts in the field to present on cutting edge topics related to Responsive Web Design and Development. Many of these conferences also have training available, so you gain practical development knowledge. There are a plethora of training opportunities prepared with you in mind. Here are a few options:
All of these conferences have a cost associated with it. For those that need some persuasion tactics for your boss to get one/more of these conferences on the usual tight budget, please see these links:
Why Go Mobile: http://gomobile.tamu.edu/why-go-mobile
Convince your Boss http://bdconf.com/convince-your-boss/
So, now what? See you at the conference!
Due to high demand, the Texas A&M Mobile team is providing another session of the hands-on responsive web design workshop. This training is offered at no charge to A&M System employees. Lunch and training materials will be provided.?Please bring your laptop.
When: January 27, 2014, 9:00 a.m. to 4:00 p.m.
Where: General Services Complex, Room 101 B&C
Register: Registration closed.
Hurry! Enrollment is limited to 20 seats.
See the training agenda and schedule. Please send questions to firstname.lastname@example.org.
Download the resources needed for the class: RWD Workshop Resources
The Go Mobile team’s recent focus group and survey revealed making departmental websites mobile friendly is not a high priority for management. A respondent said tools were needed to “help convince my leadership that this needs to be done now and not just soon.” Here are a few ways you might approach this problem.
“[Insert name of top competitor]’s website is already mobile friendly”
Look at peer institution websites (vision2020.tamu.edu/peer-institutions) to see how far along they are in going mobile. If your top competitors are already mobile friendly, your department is falling behind. If many aren’t mobile friendly, your department has an opportunity to become a leader in this area.
“Students hate our website”
Survey students within your majors about whether the current site adequately supports access from mobile devices. Take the opportunity to find out what content is the most important to students, which will be helpful when redesigning your site.
“The latest website redesign was in the last century”
A Chanel suit is timeless. A website design, not so much. In your survey, ask students about how they feel about the website’s design. Results may help your leadership understand an outmoded, poorly designed site speaks more powerfully in a negative way than they thought.
“Faculty hate our website, too”
This could pose some difficulties in obtaining information, so you may need to be a bit “sneakier.” For example, if your department is conducting a job search, ask the committee chair if the website shows the department in the best light. The current site may not be meeting faculty needs for reasons other than lack of mobile friendliness.
We know having a great website isn’t one of the metrics by which your department is assessed. However, it is a very important tool that helps departments achieve their goals.