Monday, August 17, 2015

Improvements Coming to Tarleton's Homepage

The Web Services team will be implementing improvements and changes to Tarleton's homepage on the evening of August 18th, 2015. Changes you will notice include:

  • New degree search bar below the main slideshow
  • Consolidated "Locations" and "Spotlight/Highlight" sections on wide-screen sizes
  • Gutters, otherwise known as "white space" or "margins" have been made larger on the outside edges of page content for wide-screen sizes


Degree Search and Repository


The most exciting new feature to Tarleton's homepage is the degree search/degree repository. This section will allow prospective students to "shop" our degree program offerings straight from Tarleton's homepage. The visibility of Tarleton's degree programs has needed improvement for quite some time, especially considering that according to the 2014 Noel-Levitz E-Expectations Report, 97% of seniors said they found college websites to be reliable sources of information and over 45% of prospective students and parents listed academic program listings or details as one of their top three priorities when looking at a university's website. Each degree page in the repository lists information that is tailored to what prospective students look for when shopping degrees, including what is "different" about the degree compared to other institutions, what someone can do with the degree after graduation, what special facilities and features are available, and much more. Web Services staff and student interns worked with faculty members and other staff over the past year in order to collect the information for these new pages.


Locations and Spotlight/Highlight Section Changes


Web Services continually evaluates content to ensure that it is being provided in the most effective manner possible. One area of the homepage that has been reorganized includes the "Locations" and "Highlights" sections. On wider screen sizes, these two sections originally took up quite a bit of space, each taking up a full "row" of space across the screen. Moving the two sections to be side-by-side on desktop screen sizes is a more effective use of space. On cellphones and some tablets, these sections will continue to be vertically organized instead of side-by-side.


Larger gutters for wide-screen devices


Content, whether on the web or in print, can be difficult to read or follow if it spreads too wide across the medium on which it is situated. This is the reason why newspapers have stories organized into a "column" format. The same holds true on the web. We discovered that with the increasing widths of desktop computer screens that it would be important to implement "gutters" on our responsive webpages. You will notice on wide and ultra-wide screens that content is now consolidated to the center of the screen, with white-space on the sides. This should allow for better usability on those types of screens.

There are many other technical modifications we have worked on for this implementation, which we will go into with detail in the coming days. The entire Web Services team has put in countless hours for this project and I'm excited for these new features to be available for everyone.

If you have questions about any of the changes, just send me an email at djhunt@tarleton.edu.

-Daphne

Friday, July 24, 2015

Widgets and Why I Can't Wear an Apple Watch


I love new technology (new toys!), and I most certainly got excited when Apple was getting ready to announce their Apple Watch (which I still accidentally call an iWatch because all their other mobile devices start with "i"). Their smart watch isn't the first to hit the market, though. Android already had smart watches out for a couple years, but since I moved to an iPhone, I never looked at them as a possibility.

I do not have brand bias. I went to an iPhone because my family are all on iPhones, and they refuse to video chat in any other application than FaceTime. That's not to say we didn't test other video chat apps. They didn't compare to the quality or my family refused to create a new account just to use one app, so those requirements basically forced my decision on the brand I use personally. At work, though, I use everything because I test everything to see how different devices react to our website as well as how each one works to the advantage or detriment of our website's functionality.

It was with great sadness that I decided I could not wear the Apple Watch, but the Apple Watch wasn't the first smart watch I tried before making this decision. I had joined the university's fitness program and tried out the new Fitbit tracking watches we were given, and before that I tried a different fitness watch. I had the same results each time: they cut off my circulation, putting my hand and wrist to sleep. And no, it wasn't the typical "user error" of keeping it too tight.

Downside: I can't appreciate the joys of the Apple Watch without risking putting my hand to sleep.

Alternative: I can still use my iPhone to answer phone calls, check the time, view the map, read my mail, and all the other things that are easier to read on the larger screen anyway.

Not too bad, just not as cool as the new technology, but I can still function with the alternative option.

It's these kinds of decisions that I make in my personal life that I also have to make when web maintainers request to embed some kind of code, typically a widget, onto their web pages. In respect to our website, I have to look at web, compliance, and security standards as well as our Tarleton branding guidelines.

If the code you request to embed on our web pages doesn't pass the tests, then we cannot embed the code onto our webpages, however, where possible, we can still link to an external website that provides the content in its original form.

Just keep in mind when doing research for awesome technology to add to your website, you should include Web Services in the investigation of such products to determine if the safety or privacy of our constituents is compromised or the content is not accessible, as well as all the standards we must follow. Including us helps you ask the vendors the right questions, so we can get you the product you want without the vendor's response going over your head.

Things Coming Down the Pipeline


Please note per our Web site Terms of Service (under Scripting languages and allowed packages) that all code you wish to embed on your website must be approved by Web Services before it can be implemented.

We do have a lot of legacy content on our website that will not be transferring over to the new website due to the programming issues I mentioned in Responsive Design Next Level: Entirely Modular Pages. As we receive new requests for certain types of "widgets" (feeds, modules, or other embedded code), we discourage further or additional use of those "widgets" or encourage other temporary solutions as we look for new solutions.

These are a few that are coming down the pipeline.

Flash "Widgets" (uses Adobe Flash Player, as opposed to apps in an app store)

As we move over to responsive pages in Project Squishy, we have to look at how any "widget" can adjust to the screen size of any device. If the content cannot squish into the screen, we are encouraging web maintainers to find alternative solutions as they will not be accessible to users of those smaller devices. Many of our current "widgets" have a forced set of dimensions that would, therefore, not be transferable to the redesigned site.

Adobe Flash products have had consistently negative feedback from users with disabilities. Accessibility advocates discourage its use in place of HTML5 alternatives.

Adobe Flash has had other negative feedback as well, including poor support on mobile devices as well as security risks. Apple mobile devices don't support Flash, period. Firefox is heading that direction. Even social media executives are asking Adobe to finally say goodbye and accept the HTML5 solution.

There is no more general support for Flash, so in the end, we really need to convert everything off as soon as possible for accessibility purposes. You don't want to prepare for the end-of-life date after you cannot view your Flash products on browsers like Internet Explorer or Firefox. Prepare for its expected end-date, and do research on alternatives now! Contact Web Services for assistance in possible solutions.

How do you know it is a Flash widget? 

If you right-click on the widget in your browser, and it shows a menu option "About Adobe Flash Player [version]", that is a Flash widget.

The following is a short list of examples that will not be transferable, along with our home-grown Flash widgets:
  • Prezi presentations: you should only link to these on the Prezi website.
  • Photobucket, Flickr, and other photo (and music) slideshows or galleries: we have slideshow solutions in the redesign for very small slideshows, and for larger slideshows we also encourage links directly to the albums or album slideshows.
  • Music players: contact Web Services for options
  • Online form software: we use an enterprise solution called Wufoo
  • Calendar/events solutions: we use an enterprise solution from ActiveDataX, and we can refer you to alternative solutions.
  • Clocks and countdowns: we are currently investigating options
  • Chat room software: we are currently investigating options

Social Media Widgets


Before we even considered a redesign of our website to be responsive, we were already having trouble with embedded social media widgets, like the social feeds. Originally, we could pull the content (via a feed file) and style it to our own liking, however, these larger social media outlets have been wary of their competition using their platforms to promote their competing products, and they decided they wanted to control the entire look and feel of their platforms to direct their users to their own services. Remember when Instagram stopped showing previews of their photos on Twitter to increase viewership on their own platform? Or how about the Periscope vs. Meerkat showdown?

They now insist we use their proprietary code, look and feel. Sure there are a few customizations, but we are at their mercy at all times.

We've tried before to fix issues. There was a Facebook feed widget issue that popped up a few times throughout one year where the size had gone outside our template's layout. I'd muck with our webpage's styles to try to fit it back in the boundaries and display at the right text size, but as soon as Facebook fixed the widget, my temporary fix broke the widget again. I'd have to go to every single webpage that had the Facebook widget, and fix each and every one. Twice. Each time.

If your page is not working correctly because of the social media feed, our hands are tied during that time the vendor is working on the fix while your page looks broken and unprofessional.

Given the instability of their code, we have discouraged new requests for embedded social media widgets, and will not be moving them to the redesigned site unless we can find a proper alternative. Given the lack of support for customization of widgets from these social media outlets, we are not hopeful for solutions at this time but nevertheless are on the lookout. We still allow links to your social media pages per our social media guidelines, and that alternative has been available since before we learned of their codes' instability.

The following is a short list of examples of social media widgets that will not be transferable until we find proper alternatives:
  • Social media feed, follow, like, etc. widgets
  • Social media mass share widgets (e.g., AddThis, ShareThis)
  • Comment/discussion widgets
  • Ratings widgets

Tracking Code


Web Services uses Google Analytics tracking code to help you determine what is working on your websites, what your constituents are interested in, and what needs improvement or removal due to lack of interest from your target audiences. We consult with web maintainers based on university, department, and program goals and our constituents' needs when accessing our website content. However, when additional tracking code combines with our code, our analytical data gets skewed (e.g., duplication or removal of important information), so we cannot provide proper consultation services to you.

Typically, tracking code (like Google Analytics) is hidden from sight when our constituents view a website. This is good because we don't necessarily want people to see those page view numbers which only tell a partial story about the page's usage anyway. Some might interpret them as good while others might think they are bad. But what you don't know is that hackers can see these embedded code snippets and exploit their security flaws to hack our website. One of the many approaches they use is "injection". In this scenario, they don't have access to Cascade Server or the web server itself to make changes to our webpages, but they can view the code of our website, find a backdoor in any weak programming, and inject malicious code onto our webpages and server. Flash widgets are what we typically hear about having these flaws, but any code has the potential to create security leaks.

If you have any questions about "widgets" or code you want to embed on your website, please let Web Services know what you are researching, and we can help you determine your best options.

-Karole

Thursday, July 2, 2015

Future of Web Editing: Proactive versus Reactive Compliance

I went to my brand new medical specialist the other day, and like with any new client, he asked me what I do for a living. I told him I was a web designer and developer. He remarked that he has a website and someone who works on it, but he knows how busy the developer is, so he thinks he should update the website himself.

This is a response I hear quite often from across the campus. Only a decade ago, everyone with a computer connected to the Internet was getting into the latest web editor they downloaded and sprucing up webpages related to their work and hobbies. And we all called ourselves “Webmasters.”
It was simple enough, right? After all, it is technology, and technology is supposed to be smart enough anybody can build a webpage.

Supposed to be.

But it isn’t.

And that was the shock I received at the first accessibility conference I went to a decade ago. Anyone can build a webpage with the numerous drag and drop options available, however, most are not aware of the accessibility challenges, not to mention content strategy or information architecture. We can do a lot with technology, but technology is only as good as what we put into it. Without the proper knowledge, web maintenance is becoming a far more specialized practice only individuals with a minimum set of technical skills qualify to accomplish.

Our goal as we progress is to make it easier for less technical staff to maintain websites and help technology literate staff keep up with compliance standards at the same time. A new strategy we will be implementing will use a technique commonly used on word processors.

Think back to the days of the typewriter. Yes, they still exist, and their sound is unforgettable to those of us who have used them, but you may recall the typewriter never told you that you misspelled a word.

Yep! You remember reading through your work and cursing under your breath as you had to start all the way over. Well, that is unless you had one of the newer typewriters that let you go back and erase a typo. And it improved through various intervals until we started typing on computers in these technological contraptions called word processors.

Example of a word processor warning a user of a misspelled word.

Then they got really smart! They started to warn us about our misspelled words! Eventually, they were programmed to figure out what we intend to say despite our poor typing skills, and now they autocorrect text for us.

The same kind of proactive warning system has not been done to make web content accessible. For example, web maintainers remember their days writing research papers and using underlines for the titles of books. However, underlines on the web are used primarily for links. People often get confused about what is a link and what is not when they see the underline, imagining they will perhaps hit an online store selling that book only to click on a non-reacting webpage. Web maintainers receive no warning when they underline text for web content telling them they are using the style inappropriately.

This means what I do right now checking our website for accessibility compliance issues is very reactive. I go through webpages manually to check if web maintainers are inappropriately using the underline style for web content. Then I tell them where the problems are, why underlining content that isn’t a link is inaccessible, and ask them to remove the style from their text. I have a very large website to scan and it is very slow process. And that is only one piece in a very long checklist of accessibility compliance issues!

However, with Project Squishy, we will be improving all that in two ways:

1. Appropriate Styles and HTML Tags

Example of Cascade Server's WYSIWYG warning a user of an inappropriate style in use.
Many of the styling errors that web maintainers make currently will have warnings appear around them as they use styles inappropriately, just like a spell check or grammar check. If the maintainer does not correct it in the WYSIWYG editor, the content will still not appear with the styles they had placed on the text when they publish the page to the live website.

This also goes for HTML tags that have been deprecated, such as the old acronym tag (see the full list of HTML 5 tags, plus the alternatives for deprecated tags).

2. Properly Structured Page Content, Alternative Text, and Appropriate Writing for the Web


Preview mode in Cascade shows a warning for the text that was inappropriately styled along with the reason and options for correcting the issue.
Previewing a page inside Cascade will show a warning for many more issues that are inaccessible, including missing or inappropriate alternative text, bolding or italicizing of entire paragraphs, and using headings to increase the font size of entire areas of content that should be paragraphs.

These issues will only appear in the Preview mode inside Cascade Server, along with the reason and options to fix it. When maintainers publish the content without fixing the accessibility issues, the content in violation will not publish.


It will also autocorrect inappropriate spacing and punctuation.


I’m working on more issues as Cascade allows me to resolve them within the system in order to provide maintainers the quickest turnaround on accessibility compliance checking. This proactive approach will help web maintainers receive immediate warnings of inaccessible content issues as well as teach them what to do without me having to review the content and write responses each time.

The Future of Proactive Accessibility Checking

My solution inside Cascade Server is not a full accessibility compliance check, but it is a step in the right direction for all of us. Many things will still need manual checking, and web maintainers will still need training on how to make content more accessible, just like we did when we learned how to write research papers on typewriters.

I do see some potential areas for technology, on its own, to catch some of our mistakes. For example, we cannot insert an image into a webpage and generate automated alternative text for it based on what is seen in the image currently. However, The Wolfram Language Image Identification Project is making some major strides in image identification such that if we were able to implement it into web editors, we would, at minimum, be able to generally describe images based on what their databases believe all those pixels in their specific pattern on the images represent.

The only problem with this is similar to problems with textual autocorrection. Does the alternative text accurately describe the mood or intention of the web maintainer who inserted the image into the page? What about artistic expression? Yes, we will all be laughing at the funky automated identification responses just like we already do with textual autocorrect from our “smart phones.”

-Karole

Thursday, June 4, 2015

Badgering Us for Badges (and Other Social Engineering Scams)

Social engineering, with respect to the web, is the psychological manipulation of web maintainers (or content owners) to perform certain actions, such as clicking on links in emails and adding those links to websites. I have so many examples, but I'll just provide a couple to start you off:

Subject Line: (empty)


Hi there,

I hope Monday is treating you well? I was just browsing and came across your site. I was wondering if I could offer a couple of suggestions.

As a mother, child safety is very important to me.

Here is a couple of guides I consider to be of great help. Would you consider adding them to your resources page? I think it covers a lot so I’m sure your readers would find them a worth-while read.

1) Random keyword related link
2) Random keyword related link
3) Random keyword related link

And this was the page is was referring to: Completely unrelated webpage (music education resources page) on our website that uses related keywords on education and children and contains lots of resource links.

Either way, I liked your site, keep it up

Kind regards,
A robot scanning our website
This was an actual email I received, however, I removed the names and links to protect the innocent. Note the emotional plea, the poor punctuation and grammar, and the desire for you to provide these links on your webpage, even though your page is considered such a great resource without them.

On this next one, I will reveal the webpage the robot was referring to, so you can understand how smart these robots are:

Subject Line: Astronomy info from retired teacher and students:)


Hi there,

My name's a robot scanning our website and I'm a tutor at the local middle school. The kids that I mentor wanted me to email you and let you know that they think your page, on space is very helpful! We have been learning all about astronomy, since a parent donated an amazing telescope to the school. http://www.tarleton.edu/Costweb/sps

As a thank you they wanted me to reach out to you and give you another great resource they have been using and have found helpful  Random astronomy keyword related link

This group of kids really are wonderful and have come a long way in learning, they were hoping you would add the above link to your page, and because of their hard work, I told them they could have a surprise pizza party this Friday ;)

Let me know if this is something you would be interested in adding to your page!

Thanks,
A robot scanning our website

They received a pizza party just for finding our website and telling us we were missing a webpage! And this tutor, once again, has poor punctuation, poor grammar, and an aching desire to convince me she is a legitimate person. Do I take the bait?

If you look at the Tarleton's Society of Physics Students website they refer to this time, it does look like they hit an appropriate webpage on our website with the resources links about astronomy, though that is only one topic in physics if you look at the entire listing of resources there. Should you add their link to your webpage?

No!

One aspect of Search Engine Optimization that I did not mention in great detail in What is Good for SEO is Good for URL is authority and legitimacy. Search engines rank you based on how relevant you are from other websites. That is to say, if a lot of people link to a particular page, then it must be the authority on that subject.

I mentioned before that we have authority and legitimacy based on our .edu status. In fact, ours is higher than any other domain (e.g., .com, .org, .net).

If we link to someone else, we are saying that the links we place on our website have authority and legitimacy as well. That increases their rank in search results. When it comes to legitimate sites, link exchanges are good for both entities. When they aren't legitimate, we actually lose rank - and they gain.

There lies the need to socially engineer you to believe you should add their link to your webpage.

Social engineers are getting better at their game these days. They can pull a logo off our website and stick it in an email, claiming to be one of us. They can spell their email addresses almost exactly like one of our legitimate ones. They can even build a website to collect information on people and lure us into baiting more people. Take, for example, this more recent attempt to manipulate us:

Subject Line: Spring 2015 Graduate Program We Have Rankings announced!

Website collecting user information to sell to third-parties is pleased to announce its Spring 2015 Graduate Program We Have according to students, enumerating the best graduate programs in the country based solely on ratings and reviews from current or recent graduate students posted on website collecting user information to sell to third-parties.

Program rankings, compiled using data gathered between September 1, 2012 and March 31, 2015, encompass reviews posted by more than 70,000 students participating in over 1,600 graduate programs nationwide.  Ratings are based on a 10 star system (with 1 being the worst and 10 being the best).

For a copy of our Top Rankings Badge & Seal, please click on the link.

For the rankings page, please click Graduate Program We Have Rankings

The Top Graduate Program We Have are listed below:

1 - 7        removed
8             Tarleton State University
8 - 25      removed

METHODOLOGY
Website collecting user information to sell to third-parties reaches current and recent graduate students through scholarship entries as well as social media platforms. 

Website collecting user information to sell to third-parties assigns 15 ranking categories to each graduate program at each graduate school.  Rankings cover a variety of student topics such as academic competitiveness, career support, financial aid and quality of network.

For a given graduate program, rankings are determined by calculating the average score for each program based on the 15 ranking categories.  These scores are then compared across all ranked schools for that program and are translated into a final ranking for that graduate program, i.e., “business and management”.  A given graduate program is not ranked until a minimum threshold of graduate student surveys is completed for that program

Contact information for a robot scanning our website
Again, removing the actual names to protect the innocent, but I did go to their website - not from the email, though! The email contained tracking code that allows the robots scanning our website to recognize they hit a live email address, so they can spam you with more emails or sell your contact information to a third-party vendor who will spam you with more emails. Note the endless cycle that comes from curiosity?

I don't want to sound cynical. There are some legitimate reports out there ranking universities with scientific methods, so I read through the methodology you might have skimmed over. That's right, I didn't even have to ask them for it. After all, a methodology stated up front would provide legitimacy all on its own, right? Yeah, I knew you were shaking your head.

Look carefully at the content of the email: the information is based on student responses. They have convinced over 70,000 individuals to create an account in order to look through the results and vote on their universities. By creating an account, they collect information about these individuals.

Take another look at the numbers they mention, including "70,000 individuals." There are 322 million people in the United States, by 2014 estimate, so what portion of the population has a graduate degree or higher? And they've been running this website for 3 years with only that kind of response?

As I said, I tried not to be cynical. There are crowd-sourced databases from legitimate and authorized firms on the web, so I searched on Google for the website and entered from there. I have to say that the website looks very sophisticated (as many do), so it does become harder to see beyond the flashiness of the design and information plastered everywhere.

I looked specifically for the page listing out our rank within the graduate program they mentioned we were number 8 on. When I finally found it, there was a link to Tarleton State University next to the number 8, so I clicked on our name to see their detailed report on our grades from student voters.

The first thing I saw on our report card were lots and lots of stars covering 60% of the webpage. That is the distraction they hope you will linger on. When I looked up above those stars, I saw just how many students responded to our university's report card: 7.

A big, whopping 7.

And given they are user names and not actual names, I couldn't verify if they had actually attended Tarleton.

Then I went back to the full list, clicked on the number 1 ranking university, and there were 29 respondents.

Oh, but it gets better.

I went back to the full list this next round, and I clicked on the number 2 ranking university. Drum roll, please, for the number of respondents that brought this university to a number 2 national ranking on this particular graduate program: only 1 respondent.

Just 1.

Essentially, if you want a higher ranking, you have to convince your students (or your neighbors, since the voting is anonymous) to create accounts on this particular website (not a unbiased firm randomly surveying the population), pass this unknown company your personal information, and then vote up your university graduate program. May the most popular university program win.

There is no way this was scientifically calculated, measured or weighed to give us the national ranking they claim we have. Link badge denied.

How to Avoid Being Socially Engineered


These are some of the steps you should take to avoid clicking on links in emails or posting those links or link badges onto your wesbite:
  1. Check the email address
    • Legitimate company or firm?
    • Words spelled correctly?
    • Word spelled slightly off or extra punctuation added to what would normally be a legitimate company or firm?
  2. Check spelling, in general
  3. Check grammar and punctuation
  4. Check for an emotional plea
    • Are they trying to convince you to do something in a short time frame or insisting that you respond to an email they've sent you before?
    • Are they using reverse psychology?
    • Are they pleading to your humanity?
  5. Check how they found you and how relevant you are to the link exchange they are requesting
    • Keywords randomly found on your page?
    • Do you have a resource page with your email address on it?
  6. Check the links from a search engine instead of the email
  7. Check their methodology for scientific weights and measurements
    • What is their scope?
    • What are their criteria?
    • Where (sources) do they collect their information?
    • Is their information even accurate?
    • How do they calculate the results?
    • How do they weigh their final results?
If you do find an email that looks like social engineering, go ahead an delete it. If you think it may be legitimate, forward it to us, and we'll investigate it for you. If you have any other questions about social engineering, in general, you can contact Tarleton's Information Security Officer, Marilyn Meador.

-Karole

Thursday, May 21, 2015

Pulse of Higher Education Accessibility

I found this article Patterns in Higher Education Accessibility Complaints very interesting in respect to where we are right now with providing accessible electronic and information resources (EIR), academic services, and other services across all institutions of higher education. This is not an exhaustive list, but it gets to the issues most complained about across our campuses nationally.

Two resources he mentioned about litigation with higher education were also included:
Again, none of these are exhaustive. I mentioned in a past article the National Association of the Deaf is attempting a class-action lawsuit, filing two first against Harvard and MIT on lack of appropriate closed captioning of online videos or educational materials. And more recently, the United States Department of Justice is involved in a blind student's lawsuit with Miami University (Ohio - not Florida) over inaccessible software.

This brings me to an important aspect to my duties as the EIR Accessibility Coordinator. The first list of complaints mentions issues that may need the attention of different accessibility coordinators on Tarleton's campus. For example, I do not personally handle issues related to academic courses and test taking. Students are asked to contact Center for Access and Academic Testing (CAAT) for assistance in these areas. Faculty and staff can contact Employee Services for assistance getting assistive technology in their work environment. However, my list of duties as Tarleton's EIR Accessibility Coordinator are defined by the Texas Department of Information Resources. Generally speaking, it involves checking all our electronic and information resources for compliance with accessibility standards as well as any we have yet to procure for university use and training those who create EIR content as well as resolving any issues that come up.

Procurement is a big issue because pretty much everything we buy has some EIR aspect to it and has to be upgraded and maintained in ways that keep them compliant or improve their compliance. The following electronic and information resources must be reviewed for compliance with accessibility standards:
  • Web Applications and Software (e.g., websites Tarleton uses, email, TexanSync, mobile apps)
  • Software Applications (e.g., Microsoft Office and Outlook, Adobe Creative Suite)
  • Operating Systems (e.g., Windows, Mac, Android)
  • Telecommunications (e.g., phones)
  • Videos/Multimedia (e.g., YouTube, Vimeo)
  • Self Contained (e.g., copy/fax cachines, laboratory equipment)
  • Desktop/Portable/Mobile Computers (e.g., Apple iPad, Microsoft Surface)
That is a huge list and not even a comprehensive one! That's obviously more than I can juggle along with my primary job position as Web Designer / Developer. Some of these issues are actually checked by other organizations that assist accessibility coordinators in determining accessibility. Organizations like Knowbility (where I just recently attended a conference) assist all of us in training vendors who provide these kind of EIR as part of their business. In fact, one of the vendors on the most recent lawsuit was there (another didn't tell me who they worked for) to learn how to make their products accessible.

The point I'm trying to make here is that not all software is accessible - nowhere near that. However, with everyone's assistance and open communication, we can all become more compliant and avoid these lawsuits that are starting to really pop up everywhere nowadays. People with disabilities have been aware of the laws that protect them from discrimination for a long time, but that "legal" word has not spread as it should and from their point of view, they've waited long enough for us to make certain changes to our processes, so they are no longer discriminated against.

As always, I will keep you informed of any changes to the laws and what we need to do to comply. If you have any questions, please feel free to contact me. Open communication keeps us better prepared to handle these tough issues and determine our direction moving forward.

-Karole

Tuesday, May 19, 2015

Responsive at a Glance

Web technology has changed so much in the last five years. What used to be straight-forward and simple has now gotten complex with the invention of responsive technology. The world has a jungle of devices, and the devices display many different breeds of websites. We as developers have to make decisions on how to organize our websites so that all devices in all sizes give users the same opportunities to needed information. We are, in a sense, genetic engineers.

Responsive technology does not provide a perfect viewing platform for online information. It is by far the best methodology we have for the amount of device sizes we must cater to, but inevitably there will be some things that are visually bothersome. The most important thing is to make the same information available to all devices.

With traditional publications, such as posters, brochures, and billboards, there are things we must pay attention to, such as whitespace, image placement, kerning, and content alignment. In the web world, these things are less precise, especially with responsive development. We can of course program to provide the best situations for popular screen sizes, but everything in-between can* have a slightly spaced-out, misaligned, or unnatural feel. (*some responsive developers are better at preventing this than others!)

A great example of a responsive design is the new Texas.gov website. They made things simple by
Texas.gov website screenshot
The new www.texas.gov website
putting all of the important information on the homepage (without crowding it) and making it easily searchable. The content is easy to read, and scrolling down the page is quite pleasant. They use what our office calls a "stacked" page structure, where only one section of information is available per "row" on your desktop or mobile phone. This allows for consistency of design on all platforms and makes finding information easy. Their predictive search is on par as well, providing organized categories of results including related agencies, services, search suggestions, and more.

We have taken a similar approach with Tarleton's website. Our responsive homepage is "stacked" and we provide predictive search capabilities. We try to provide a similar user experience no matter what device is used, however small differences can be noticed.

To demonstrate some of the differences in how a single page may look on different devices/screens, I am providing photos of Tarleton's homepage below. You will see differences in text/image size, space taken up by text, column sizes, content organization, navigation look, and more.

This is a mobile view of Tarleton's homepage. You will see a collapsed menu and search at the top, a banner slideshow underneath the header, and a portion of the locations section. Each content item is "single file" down the page, with the slideshow image appearing ahead of the slideshow text.

Since this mobile phone is small, there is not room for desktop-style navigation. If we did try to fit traditional navigation on the device, the text would either be too small to press with a finger or take up too much valuable real estate. We have decided to collapse the navigation menus just for mobile phones and very small devices.


This is a tablet view of the homepage in a vertical/portrait orientation. On this one you can see quite a bit of Tarleton's homepage, in fact, you can see all the way down to part of the News section. We have the normal navigation available without it being collapsed. You can also see a bit of space underneath the text on the right side of the slideshow.

We are able to see further down the page because of the size of the device vs. the screen resolution. Even though the device is smaller than most desktop screens, the screen resolution and vertical orientation allow for more vertical page to be visible.


This is the same tablet, but in a horizontal/landscape orientation. Obviously, less of the page is visible in this orientation, with only part of the locations section visible. We are able to fit in the full navigation just as with the vertical orientation of the tablet.


Here is Tarleton's homepage on an older desktop screen, with 1920x1080 screen resolution. Since the screen is more square than rectangle, you get a more narrow view of the page than a wider-screen version. You can see the entire locations section and a little sliver of the highlights section.

Since the screen is much larger than a tablet, you can see we have adjusted the text size so that it isn't too large. In doing so, we have created extra "whitespace" to the right of the image and underneath the slide text. Considering there is a different amount of text accompanying each slide of the slideshow, there can be more or less whitespace. It all depends on how long the title and teaser need to be for each slide.


Lastly, this is a widescreen desktop view of the homepage.There is quite a bit more space in header, the navigation bar, and in the slideshow text area. Again, if we were to make the text larger in order to fill those areas, the size of the text would be too overwhelming for the screen size.


As you can see, Tarleton's homepage looks different on all of these screens. However, the same information is available on that page for all devices. Given this is just a small sampling of the hundreds of screen sizes available, we can conclude that responsive technology is here to stay for the foreseeable future.

Web Services is constantly learning more about responsive technology, and has been programming some changes to the responsive templates in order to remedy some of the whitespace and issues with being "too spread out." We will be adding a "gutter" to our pages so that the main content is more consolidated and less spread out horizontally. The page will still be responsive, but should be more visually appealing and easier to follow. The homepage changes should debut sometime this summer.

For another visual explanation of responsive design, check out this blog article from FROONT: 9 basic principles of responsive web design.


-Daphne

Thursday, May 14, 2015

Putting People First: Deciding What Is Important Contextually

Describe the sun to a person who has been blind their whole life, and you will likely find some challenges. For example, what is this thing called "color" or "bright"? What does red or yellow look like? But you can tell a blind person that the sun is round like a ball because that is something they can relate to, something they can feel here on Earth - definitely don't encourage trying to touch the actual sun!

As usual around this time in May, I headed down to Austin, Texas, for the annual John Slatin AccessU Conference hosted by Knowbility. And as usual, they bring some kind of art or cultural experience to the conference in respect to some aspect of accessibility compliance. The keynote speaker this year was the Blind Film Critic himself, Tommy Edison, and he took us on a journey through audio descriptions on Monday night at the Alamo Drafthouse Cinema on South Lamar.

Right now audio descriptions feel like the adopted children of video players and movie theaters (and probably every other theatre) when it comes to accessibility options. We are becoming more and more accustomed to providing closed captioning for the deaf, but what about the actions that are important for the story that the blind cannot comprehend based on sounds and dialogue alone?

Blind audience members were dismayed when their blind superhero, Marvel's Daredevil, came to Netflix without audio descriptions. Daredevil's alter ego, Matt Murdock, is constantly provided with audio descriptions of people's actions by his friends throughout each episode, but the same could not be said for the Netflix subscribers who complained about this irony. Netflix announced a decision to start adding audio descriptions four days after posting the entire season.

"Oh, sorry, you didn't see that. She just nodded her head."

Tommy Edison judged attendees, instructors, and staff of the AccessU conference to a contest of audio description to see who could describe 90 seconds worth of a scene the best. Before anyone took a shot at it, some attendees took an audio description class Monday morning and the rest of us enjoying the show at the Alamo Drafthouse listened to a professional audio describer depict the 2015 Oscar winner for an animated short film Feast. She was lucky, though. She'd seen Feast maybe ten times beforehand and refined her description to best tell the story. We, however, watched an entirely different short film, and had to come up with a description to a story we had never seen before. Everyone tried hard, but it was obvious that without understanding the story and without properly analyzing the scenes, where dialogue and sound began and ended, you aren't providing anywhere near the full story.

Audio descriptions are the alternative text for moving images, so you can take much of your instruction from the average alternative text guide for website compliance (many of which are posted on A Picture is Worth a Thousand Words... Literally). As a sighted audience member, I am overwhelmed with visual information. So if I were to try to describe what is happening in any scene or an entire movie, which details do I include? Which ones are important? More importantly, which details are important to a person who is blind?

For example, the short film we were audio describing had three white characters and one black character. Do we describe the fourth character as being black? Again, those born blind do not know what color looks like. Unless the fact that the character is black, as opposed to the actor portraying the character being black, is important to the context of the story, this detail can be ignored. It provides no essential information to the story, so it wastes otherwise important and precious time to describe something else.

One hang up I had while the professional was describing the dog in Feast was that she wasn't describing all the visual cues, the facial and body language. That, I learned, is information blind people would not comprehend anyway, unless you don't mind your privacy being invaded by someone constantly touching your face for new facial expressions. However, blind audiences can gather a great deal from verbal cues like inflection and pitch while speaking.

This hang up is one we all share. So often when we come up with content, we look at it from our own point of view, what we think our audience wants or needs. This only helps us, not our audience which makes them more confused and need to ask more questions from us. We have to turn our focus to them, get in their shoes. What is important to them? Focus on the important details.

Interesting little debate that we somewhat covered over comedic scenes: due to the fact that the audio description needs to occur at times when other sounds and dialogue are not the focus, a blind audience member listening on their headset may start laughing at the punchline to a joke seconds before the rest of the audience gets the punchline visually at the movie theater. They say people have actually told the blind attendees to hold back their reactions, but is that discrimination? By telling them they cannot experience and react to the performance naturally, on their own time, are you making it a better experience for one group of people or all groups of people?

Don't understand the situation? Okay, let's say you are on Facebook or Twitter or whatever social medium, and you had to work the late shift during a TV show that you absolutely love, and you just told all your friends not to say a word because it would totally spoil it for you. Keep in mind, they have lots of other friends who are interacting with each other on social media while watching the same show, but you've just told them they can't have any interaction at all in relation to this TV show because you would see it before you turned on your DVR. Is it the same kind of discrimination? Do they have the right to post the spoilers? Is it possible for you to ignore those posts (or laughs) for a short period of time to catch up with them later? What do you think?

-Karole