Running Header: CMST495: Trends and Projects in Digital Media 1
Trends and Projects in Digital Media (1402 CMST 4957980)
Degree Reflection
Shafqatullah Syed
University of MD U. College
Prof. Dr. Sheri Braxton-Lieber
20 April 2014
Trends and Projects in Digital Media 2
2
Abstract This paper is a reflection of the Digital Media and Web Technologies major offered at
University of MD University College (UMUC). The major offers three different tracks,
web development, motion graphics, and digital media. The paper attempts to familiarize
the audience of specific courses taken, why they comprehensively benefit career choices,
the positive impact professionally gained, and how they pave future development. It starts
with a progression from a young student to a professional then an adult student to a
seasoned professional. This progression is critical as it steers the reflection incorporating
real-world experience.
Trends and Projects in Digital Media 3
3
Trends and Projects in Digital Media (1402 CMST 4957980)
Degree Reflection My initial attempt at higher education was not completed and as a result I found
an opportunity to finish at UMUC. The Digital Media and Web Technologies major
complements my previous interdisciplinary approach to education. I was in search for an
online program that I can manage with the responsibilities of my lifestyle. It needed to
accept both the education I already gained from other schools and enhance my
professional footprint. The school not only had to offer up-to-date knowledge but the
quality of instructors teaching had to be equivalent to the peers of the professional
community. Ultimately, I found UMUC to have qualities in its diverse and practical
course offerings and the level of instructorship was recognizable in the field I was
interested in.
Courses Taken and Their Found Benefits
As a creative individual I began my educational journey with conceptual art
studio, mixed media, and design courses. As technology was beginning to infiltrate
schools I quickly picked up on it and experimented with digital design. My first job was
not technology related and I realized that I required a career change and took a job as a
web designer at a startup company. At this time I completed my two-year degree and
there was not a local four-year university offering the courses directly applying to the
web design profession. Fortunately, the local university was starting a new program that
took an interdisciplinary approach and I was able to create a Multimedia Technologies
major using the full gamut of courses offered. Finally, I was able to use experience
Trends and Projects in Digital Media 4
4
gained from real world experiences and invest them in courses with the insight gained.
Unfortunately, events did not allow me to graduate but I am hopeful in completion of my
undergraduate degree at UMUC.
Having most of the preliminary and foundation courses transferred I started at
UMUC taking Interaction Design (CMST290) and Introduction to Research (LIBS150)
which allowed me to loosen the rust from my joints. CMST 290 was an introduction to
design concepts and how they can manipulate the aesthetics and interactivity of users and
LIBS150 was a requirement for the university explaining the research process and using
tools form the library and online sources, ("Libs 150:," 2014). Now, I was more
comfortable with going school after a ten-year hiatus and my next semester I followed
with two interesting courses in Cultural Anthropology (ANTH 102) and Problem Solving
and Algorithm Design (CMIS 101). Never taking an anthropology course before it
allowed me to fine-tune my critical thinking skills by in-depth discussions, and
encouraging to dig as deeply as possible, to go beyond what is immediately apparent in
order to uncover the complexities of human experiences, (Ali, 2009). Problem solving
with Python programming language unearthed my avoidance of Object-Oriented
Programming (OOP) to remind me of its power and control over design. By this time in
my career I was exposed to web technologies and knew I was not interested in getting
intimately involved with OOP. I wanted to gain more current experience to build a
cohesive portfolio, which I was missing. The next two semesters I enrolled in
Fundamentals of Digital Media (CMST295), Principles of Web Design I and II
(CMST385/386), and Illustration Graphics (CMST320). UMUC says, “The digital media
and Web technology major is designed to help prepare students for a career in the field of
Trends and Projects in Digital Media 5
5
digital design,” ("Major in digital," 2014). In doing so, the four classes are in line with its
objective and after completion of the courses it confirmed one of my goals to garner
recent knowledge and build a consistent portfolio. The content covered in these four
courses introduced current technologies and design principles that enhance
personalization of information and continue to offer rich, multimedia content, (Brooks &
Gibson, 2012). Currently, I am taking Trends and Projects in Digital Media and Web
Design (CMST495) that will help compile the content created from previous courses,
external sources, and create a communications piece that will allow employers to gain
insight not found in the resume. Per UMUC advisors, I would need to take a few electives
to complete the degree requirements and plan to investigate Image Editing (CMST325)
and Advanced Image Editing (CMST425). In the pursuit of portfolio building and career
enhancing the tools, concepts, techniques, and the legal and ethic issues discussed in
these courses will renew my understanding in digital media.
Professional Preparation
Seasoned businesses owners and career advisors, Edie Golberg and Karen Stevens say,
“A well-structured career… can be delivered via technology…” and “…we can rely on
technology to fill the gap,” (Goldberg & Gibson, 2012). My career in digital media has
progressed through frontend web technologies, digital/print media, web/graphic design,
user interfaces, usability, and user experience. As a by-product I learned skills in
communication, problem solving, time management, conflict resolution,
hardware/software administration and usage. It behooves a person to make conscious
efforts to learn in the dynamic field of web technologies and other digital media
professions. Gaining this competitive advantage can be the difference in securing
Trends and Projects in Digital Media 6
6
employment and collecting Unemployment income. UMUC courses have solidified my
marketability and my continued passion for innovation by introducing me to tools,
concepts, principles, and techniques to keeping me knowledgeable with current
technologies and foundational principles/practices in design. They have taught me to be
confident with my work and communicate intelligently.
Conclusion and Future Study
Returning to school and choosing the proper path of study was always difficult
and would need to accommodate the responsibility of a large family at an older age. The
Digital Media and Web Technologies career path offered at UMUC compliments my
professional career, invests on experience, builds a portfolio, and fosters new learning. I
am very satisfied with the education received and hope to continue additional learning at
a graduate level. A career in teaching the knowledge I have collected to benefit those in
early stages of their technology careers may be the ultimate outcome. Seeking education
again has instilled in me to keep a forward developing progressing in my career.
Trends and Projects in Digital Media 7
7
References
Ashraf Ali, H. M. (2009). Anthropology and the Changing World: How Can
Anthropologists Serve Humanity?. Management Science & Engineering, 3(4), 16-
26.
Brooks, C., & Gibson, S. (2012). Professional Learning in a Digital Age. Canadian
Journal Of Learning And Technology, 38(2),
Goldberg, E. L., & Stevens, K. (2013). Leveraging Technology to Improve Satisfaction
with Career Management. Workforce Solutions Review, 4(6), 36-‐38.
Libs 150: introduction to research (1 credit). (2014). Retrieved from
http://www.umuc.edu/library/libresources/libs150.cfm
Major in digital media and web technology. (2014). Retrieved from
http://www.umuc.edu/academic-programs/bachelors-degrees/digital-media-and-
web-technology-major.cfm
Running Header: CMST495: Trends and Projects in Digital Media 1
Trends and Projects in Digital Media (1402 CMST 4957980)
Industry Analysis
Shafqatullah Syed
University of MD U. College
Prof. Dr. Sheri Braxton-Lieber
02 May 2014
Trends and Projects in Digital Media 2
2
Abstract This paper outlines my interests and career goals by discussing influences that shaped my
profession and touches on core technologies required to enter the web design/
development profession including: Hypertext markup language (HTML), Cascading
Style Sheets (CSS) jQuery, Asynchronous JavaScript and Extensible Markup Language
(AJAX), and JavaScript. It then briefly discusses the technologies available and used in
the profession and leaves open the opportunity to constantly learn in the dynamic field of
web design/ development. The paper closes by highlighting alternative career options
from the U.S. Bureau of Labor Statics (BLS) and a local design school. Overall the
research conducted in this paper presents careers in web design/ development are
dynamic and dependent on the development of technology.
Trends and Projects in Digital Media 3
3
Personal Field of Interest, Goals, and Development Unemployment has provided a retrospective of my professional career and
allowed an opportunity to prioritize my life once more. The prolonged period has effected
not only financial aspects of my life but also the family and emotional. I navigated to the
web design/ development profession not because of passion but with conscious efforts.
There was always a love of technology but it needed direction and with the advancement
of computers I found cohesiveness in the digital world. The interdisciplinary approach to
education has been advantageous in learning different disciplines that communicate
together. The real-time response I received from code and designs on the visual Web
became attractive. My career choices were affected by this newfound appreciation and
the professional experience gained would compliment my interdisciplinary approach.
Web design/ development always has the potential of innovation and present interesting
solutions for problems to world as it interacts with the Web. There are countless web
pages added, taken down, or replaced to the Web every. Some pages fail to communicate
properly, have a terrible user experience, and contain no meaning. My chosen profession
hopes to fill this void and provide value to innovation for future generations of the Web.
Perhaps I am missing the passion for my profession and I do not understand what
that is. Writer Dr. Milred Culp interviewed an employee at NBC news productions and he
advises, “...others to identify what aspect of work excites them and go after it,” and adds,
“Any path has obstacles, but once a path is chosen, the destination is clear,” (Culp, 2012).
In the immediate the need to get back into the workforce is critical but I am also
exploring areas in freelancing, consulting, business ownership, and teaching. Web design/
development has allowed me to learn from my peers, exercise skills in communication,
Trends and Projects in Digital Media 4
4
critical thinking, problem solving, and learn new technologies. I had very little direction
early in my career and teaching from personal experience in technology would allow
guidance for those in early web design/ development positions. The scope of my career
widened to include professions such as graphic design, interaction design, usability, print
design and other non-coding opportunities.
Professionals get a job, become proficient at it, and sometimes a promotion or
new job opportunity comes along, (Bopp, Bing & Forte-Trammell, 2010). “Career
development is more than just the job but about employees seeking their passions, finding
meaning in their work, planning the best way to develop themselves, and finding the right
learning activities to develop expertise,” (Bopp, Bing & Forte-Trammell, 2010). My
current situation facilitates depression, lack of motivation, weight gain, and clouds
judgment. Experience in web design/ development has unearthed my interest in
technology, innovation, and helping others. The expertise developed in this profession
instills the need to assist humanity in any form that manifests. “The importance of
planning and goal setting, in addition to anticipating life stress, is critical for coping with
change,”(Brown & Lent, 2005).
Current and Emerging Technologies
Technology is part of any society’s development and globalization process:
Individuals, governments, professionals, academia, and businesses use and access the
Web for various purposes. Professionally, I have been involved in content creation and
functionality in front-end Web technologies. At its core the framework is built around
Hypertext Markup Language (HTML) and the Web “…over 20 years has developed from
a Web of more-or-less static documents to, now, a platform for applications,” (HTML5
Trends and Projects in Digital Media 5
5
Leads, 2012). Ian Jacobs, an editor at W3C, says, “There are two driving forces behind
this evolution,” (HTML5 Leads, 2012). The first being the proliferation of various
devices and browsers and the second is the Web’s embracing of social networking model,
which, allows the ability to reach many customers. This interactivity can be achieved by
jQuery and AJAX which is are lightweight versions of JavaScript containing code
libraries and Extensible Markup Language (XML) code interfacing between the HTML,
(Györödi, Györödi, Pecherle, Lorand & Alin, 2009). HTML and Cascading Style Sheets
version 3 (CSS3) are used to apply and create responsive applications and gives web
projects the latest design and development advantages for mobile devices, (LaGrone,
2013). Initially web designers and developers assumed “…the goal of the web standards
movement was to remove needless complexity and absurdity from the process of creating
websites so we could focus our attention where it should be: on design, content, and
experience,” (Zeldman, 2014). With the added complexities of the Web front-end
developers and designers find it more difficult to get hired with just a solid understanding
of HTML, CSS, and JavaScript. John Urban, a Computer Science Graduate at UCLA and
freelance web designer, outlines ten skills a web designer should posses including:
1. Optimizing graphics
2. Practicing good User Interface/Experience
3. Constructing good navigation scheme
4. Using fonts wisely
5. Understanding color accessibility
6. Learn to write code (HTML/CSS)
7. Knowing basics of search engine optimization
Trends and Projects in Digital Media 6
6
8. Applying human computer interaction
9. Aware of browser quirks
10. Make designs flexible and maintainable
(Urban, 2009).
Accessibility to the Web is increasing and people use a multitude of methods to
view and use it. Web designers/ developers constantly need to be cognizant of new
technologies such as HTML5, CSS3, mobile development, and responsive technologies,
introduced and their alternative solutions. The career professional should possess core
scripting and design principles. The attention to specific technologies warranted by the
type of interactivity required and device use create competition.
Careers Available Working in the web field with the focus on web design/ development many
alternative digital design professions overlap. The Bureau of Labor Statistics (BLS)
publishes The Occupational Handbook (TOH), which is the U.S. governments premiere
source of career guidance. It associates fields in systems management, programming,
computer support, systems analysis, database administration, graphic design, information
security, multimedia animation, and software development with web development, (Web
developers, 2014). ("Art & design," 2014). The advisory board at Stevenson University
School of Design Visual Communication Design program consists of successful art and
design professionals, ("Faculty," 2014). They outline art and design career options for the
web design/ development to include: web programmer, content manager/ developer,
Flash developer, Information Architect, Interactive Artists, Multimedia Designer, Web
Producer, and E-Commerce Developer, (Art & Design, 2014). It is apparent from the
Trends and Projects in Digital Media 7
7
evidence that web design/ development have the potential of taking multiple career paths.
The student or adult learner can customize his/ her interests and build a passionate
profession.
Trends and Projects in Digital Media 8
8
References Art & design career options. (2014). Retrieved from http://designatsu.org/career/career-
options/
Brown, S. D., & Lent, R. W. (2005). Career Development and Counseling : Putting
Theory and Research to Work. Hoboken, N.J.: John Wiley.
Bopp, M., Bing, D., & Forte-Trammell, S. (2010). Agile career development: Lesson and
approaches from ibm. Boston, MA: Pearson Publishing, Inc.
Culp, M. L. (2012). Find the passion in your career and pursue it. Las Vegas Business
Press (10712186), 29(15), 19.
Faculty. (2014). Retrieved from http://designatsu.org/faculty/
Györödi, C., Györödi, R., Pecherle, G., Lorand, T., & Alin, R. (2009). Web 2.0
Technologies with jQuery and Ajax. Journal Of Computer Science & Control
Systems, 2(2), 11-15.
HTML5 Leads a Web Revolution. (2012). Communications of the ACM, 55(7), 16-17.
doi:10.1145/2209249.2209256
Urban, J. (2009, July 1). 10 things every web designer just starting out should know.
Retrieved from http://sixrevisions.com/web_design/10-things-every-web-
designer-just-starting-out-should-know/
LaGrone, B. (2013). Html5 and css3 responsive web design cookbook. Birmingham, UK:
Packt Publishing Ltd.
Web developers. (2014, January 8). Retrieved from http://www.bls.gov/ooh/arts-and-
design/graphic-designers.htm
Trends and Projects in Digital Media 9
9
Zeldman, J. (2014, January 6). It’s 2014. is web design dead?. Retrieved from
http://www.zeldman.com/2014/01/06/its-2014-is-web-design-dead/
Running head: CMST 495: CURRENT TRENDS AND PROJECTS IN DIGITAL 1
CMST 495: Current Trends and Projects In Digital Media and Web Technologies:
Storyboard Project for Syed Designs Portfolio Website
Shafqatullah Syed
University of Maryland University College
Prof. Dr. Sherri | Summer 2014
CMST 495: CURRENT TRENDS AND PROJECTS IN DIGITAL 2
Abstract
This paper details assets, layout, structure, and has a storyboard for a rudimentary look
and feel of Syed Designs portfolio website. It begins with a list of the assets to be
included and then a draft storyboard of the portfolio website which, will aim to create a
cohesive presentation. The main purpose of the portfolio website is to garner accurate
communication between the dsigner, Shafqatullah Syed, and prospective employers. The
15 plus years of design and technical experience. Foundational design principles
including C.A.R.P (Contrast, Repetition, Alignment, Proximity) and Gesalt Principles
(Similarity, Continuation, Closure, Proximity) will be adhered to as they translate from
print to web. It will use a responsive single page layout that scrolls from top down.
Essentially, there will be at least five sections including a homepage but the navigation
will have at three targeting links titles, About, Portfolio, and Contact. The first section
will allow downloadable documents to learn about the artist and will cover previous jobs
the portfolio will have examples including logo, infographic, website, web/mobile and
digital design. An area for testimonials, contact form, and footer links follows this
section. The draft storyboard may later be edited to accommodate additional content.
Finally, it will be coded CSS3 and HTML5 to target recent browsers for the computer
and mobile environments. All code will pass W3C validation.
CMST 495: CURRENT TRENDS AND PROJECTS IN DIGITAL
3
CMST 495: Current Trends and Projects In Digital Media and Web Technologies:
Storyboard Project for Syed Designs Portfolio Website
The proliferation of the Internet and technology has made the web portfolio very
popular. Research on how to get the portfolio to be advantageous by communicating the
right meanings to prospective employers, clients, and academia is essential. It can be the
difference to securing a new job, generating revenue, and getting into the right schools. In
his book, “Web Bloopers: 60 Common Web Design Mistake and How To Avoid Them,”
the author says, “…the Web is sorely lacking in usability,” (Johnson, 2003). As designers
one has to understand if a visitor cannot use his/her portfolio website with ease, it
highlights bad communication and has the absence of professionalism. Some designers
focus on color and design and relax on the real purpose of the portfolio with is getting the
intended communication efficiently to the visitors. In a more recent publication more
mistakes are highlighted including: creating a splash page, background music, missing
navigation, expensive/flashy design, hit counters, no SEO (Search Engine Optimization),
using stock content, missing basic information, and a call to action, (King, 2010). Syed
Designs presents a portfolio website that will attempt to solve the many problem in
portfolio web design that plague some designers.
Assets by portfolio section
Homepage
Logo, background image, and link to the portfolio.
CMST 495: CURRENT TRENDS AND PROJECTS IN DIGITAL
4
About
PDF links to important documents including: cover letter, resume,
recommendation letters, awards, writing samples, teaching statement artist statement, and
legacy portfolio
Past roles
Logos, links for previous employers, and a background graphic.
Portfolio
Three logo print designs, infographic, three website examples, three mobile/
website examples, one wireframe/mockup, one or two digital art. This list may get
expanded depending on the assets available and this section will also accommodate any
new replacement examples. Items will grouped by like examples such as logo, print,
infographic, mobile/ website, wireframes/mockups, and digital art. This area
compliments the top down scrolling by displaying each item underneath one another.
Testimonials
Quotations from professionals validating work performed, testifying character,
and a background graphic.
Contact
Contains a simple a form with JavaScript validation and some text.
Footer
More related links and a background graphic.
CMST 495: CURRENT TRENDS AND PROJECTS IN DIGITAL
5
Storyboard
Notes
The storyboards follow a linear layout. The portfolio website is
responsive as it will resize with the browser window and still be usable
on smaller mobile screens. In addition resizable elements it also utilizes
white space, large type, grid layout, alternative text, and high contrasting
colors where possible for to optimize for accessibility. The call to action
statement targets directly to the portfolio.
CMST 495: CURRENT TRENDS AND PROJECTS IN DIGITAL
6
Both of these areas are easily updated. The artist can make sure any
referenced documents are up-to-date for prospective employers,
recruiters and to reference personally. A legacy portfolio of all prior
work is made available and in the future the current online portfolio
will be here as a HTML5/PDF flipbook.
These two
sections work
together to
provide insight
on the artist.
These sections
work together to
provide insight
on the designer.
CMST 495: CURRENT TRENDS AND PROJECTS IN DIGITAL
7
The portfolio section
illustrates experience,
expertise, and skills. Each
piece is accompanied by a
short statement or
paragraph that provides
explanation as to the
purpose, use, and
audience.
The vertical scroll
portfolio makes it
efficient for both scanners
and the ones that want to
see the all the details. All
the examples scale to fit
the viewpoint/ browser
window.
CMST 495: CURRENT TRENDS AND PROJECTS IN DIGITAL
8
Conclusion
Web design portfolios can be plagued with bad design and fail to communicate
accurately and the misuse of design principles are at the core of their downfall. Syed
Designs hopes to be the answer to the misdirected portfolios. Following century old
design principles, using sound web skills, paying attention to user experience, and basic
professionalism will attempt to prefect but it will always be a work in progress.
Toward the bottom
visitors can read
actual quotes form
reputable
professionals. This
is an attempt to
solidify authority.
Finally, the
contact form is
available for
direct
communication
with the designer.
CMST 495: CURRENT TRENDS AND PROJECTS IN DIGITAL
9
References
Johnson, J. (2003). Web bloopers: 60 common web design mistakes and how to avoid
them. Amsterdam, Holland: Morgan Kaufmann Publishers.
King, C. (2010). Top 10 website mistakes. Vital, 7(2), 25. doi:10.1038/vital1135
Shafqatullah Syed RE: Student and Exchange Visitor Program (SEVP) Audience: Designers and developers of the SEVP website and future branded system software Purpose: A system-wide style guide and resource for all SEVP products to have consistency, meaning, usability, accessibility. This guide complies existing Department of Homeland Security styles and can be used for all its affiliated agencies.
SEVP SYSTEM STYLE GUIDE
This guide is a resource for SEVP systems to produce effective and
visually-consistent products that are easy for consumers to access,
use, and understand.
U.S. Immigration
and Customs
Enforcement (ICE),
Student and
Exchange Visitor
Program (SEVP)
SEVP SYSTEM Style Guide
1
Table of Contents
1 INTRODUCTION .................................................................................................................................... 7
2 HOW TO USE THIS GUIDE ..................................................................................................................... 7
3 FRONT-END GOALS .............................................................................................................................. 8
3.1 Accessibility .................................................................................................................................. 8
3.2 Responsive web design (RWD) ..................................................................................................... 8
3.3 Graceful degradation ................................................................................................................... 9
3.4 Progressive enhancement ........................................................................................................... 9
4 BUILD OR IMPLEMENT UI FRAMEWORK............................................................................................... 9
4.1 U.S. Web Design Standards ................................................................................................ 11
5 STYLE .................................................................................................................................................. 11
5.1 Branding ..................................................................................................................................... 11
5.1.1 Header .................................................................................................................................... 11
5.1.2 Footer...................................................................................................................................... 12
5.2 Color ........................................................................................................................................... 12
5.2.1 Verify Color and Contrast ....................................................................................................... 12
5.2.2 Palette ....................................................................................................................... 13
5.2.3 Primary Colors ........................................................................................................................ 13
5.2.4 Secondary Colors ............................................................................................................... 14
5.2.5 Background Colors ............................................................................................................. 14
5.2.6 Tertiary Colors .................................................................................................................... 15
5.2.7 Special State Colors ............................................................................................................... 15
5.3 Typography ....................................................................................................................... 16
5.3.1 Content Hierarchy .................................................................................................................. 16
5.4 Links .................................................................................................................................. 20
5.4.1 Usability .................................................................................................................................. 20
SEVP SYSTEM Style Guide
2
5.4.2 Accessibility ........................................................................................................................ 21
5.5 Lists ................................................................................................................................... 21
5.5.1 Usability .................................................................................................................................. 22
5.6 Grid System ....................................................................................................................... 22
5.6.1 The Benefits ............................................................................................................................ 22
5.6.2 Accessibility ........................................................................................................................ 23
5.6.3 Usability .................................................................................................................................. 23
5.6.4 Guidance ............................................................................................................................. 23
5.7 Images and Icons........................................................................................................................ 23
5.7.1 Images .................................................................................................................................... 23
5.7.2 Image Sprites or Web Icon Fonts ........................................................................................... 24
5.7.3 Image Maps ................................................................................................................... 25
6 COMPONENTS .................................................................................................................................... 26
6.1 Form Controls ................................................................................................................... 26
6.1.1 Form Layout ........................................................................................................................... 26
6.1.2 Label Position ..................................................................................................................... 26
6.1.3 Text Input ...................................................................................................................... 26
6.1.4 Dropdown ................................................................................................................. 28
6.1.5 Checkboxes ................................................................................................................... 30
6.1.6 Radio Buttons ........................................................................................................... 31
6.1.7 Fieldset ......................................................................................................................... 32
6.1.8 Date and Phone Number Input ............................................................................... 33
6.1.9 Required and Optional Fields ............................................................................................ 34
6.1.10 Focus Behaviors ................................................................................................................. 36
6.1.11 Tooltip Behaviors ............................................................................................................... 36
SEVP SYSTEM Style Guide
3
6.1.12 Form Control Instructions .................................................................................................. 37
6.1.13 Placeholder Text ................................................................................................................ 38
6.2 Alerts ................................................................................................................................. 39
6.2.1 Feedback ............................................................................................................................ 39
6.3 Tables ................................................................................................................................ 40
6.3.1 Accessibility ............................................................................................................................ 40
6.3.2 Usability .............................................................................................................................. 41
6.4 Buttons .............................................................................................................................. 41
6.4.1 Primary Buttons ................................................................................................................. 42
6.4.2 Secondary Buttons ............................................................................................................. 42
6.4.3 Button Focus ...................................................................................................................... 42
6.4.4 Disabled and Big Buttons ................................................................................................... 43
6.4.5 Button Labels ..................................................................................................................... 44
6.4.6 Button Iconography ........................................................................................................... 44
6.5 Progress Control ............................................................................................................... 44
6.5.1 Activity Indicators................................................................................................................... 45
6.5.2 Usability .............................................................................................................................. 45
6.6 Breadcrumbs ..................................................................................................................... 46
7 Search Bar ................................................................................................................................. 47
7.1 Accessibility ................................................................................................................................ 47
7.2 Usability ...................................................................................................................................... 47
8 Accordions ................................................................................................................................ 48
8.1 Accessibility ................................................................................................................................ 49
8.2 Usability ...................................................................................................................................... 49
9 NAVIGATION ........................................................................................................................................ 50
9.1 Accessibility ................................................................................................................................ 51
SEVP SYSTEM Style Guide
4
9.2 Usability ...................................................................................................................................... 51
10 SIDEBAR/ LOCAL NAVIGATION .................................................................................................. 51
10.1 Accessibility ................................................................................................................................ 51
10.2 Usability ...................................................................................................................................... 51
11 SECTION 508 COMPLIANCE ...................................................................................................... 52
11.1 Syntax validation........................................................................................................................ 53
11.2 Semantic validation ................................................................................................................... 53
11.3 Alternate Text - Checkpoint (a) .................................................................................................. 53
11.4 Multimedia Equivalents - Checkpoint (b) .................................................................................. 54
11.5 Color - Checkpoint (c)................................................................................................................. 54
11.6 CSS Style Sheets and Headings - Checkpoint (d) ...................................................................... 54
11.7 Server-Side Image Maps - Checkpoint (e) ................................................................................. 54
11.8 Client-Side Image Maps - Checkpoint (f) ................................................................................... 55
11.9 Simple Tables - Checkpoint (g) .................................................................................................. 55
11.10 Complex Tables - Checkpoint (h) ........................................................................................... 55
11.11 Frames - Checkpoint (i) .......................................................................................................... 55
11.12 Screen Flickering - Checkpoint (j) .......................................................................................... 56
11.13 Provide Text Only Pages as a Last Resort - Checkpoint (k) .................................................. 56
11.14 Scripts - Checkpoint (l) ........................................................................................................... 56
11.15 Provide Links to Necessary Plug-Ins - Checkpoint (m) ......................................................... 56
11.16 Forms - Checkpoint (n) ........................................................................................................... 57
11.17 Skip Repetitive Navigation Links - Checkpoint (o) ................................................................ 57
11.18 Timed Responses - Checkpoint (p) ........................................................................................ 57
12 ASSISTIVE TECHNOLOGY ................................................................................................................... 58
12.1 Page Structure ............................................................................................................................ 59
12.2 Navigation and Keyboard Access .............................................................................................. 59
12.3 Focus ........................................................................................................................................... 59
12.4 Rich Internet and Mobile Content ............................................................................................. 59
13 REFERENCES....................................................................................................................................... 60
SEVP SYSTEM Style Guide
5
SEVP SYSTEM Style Guide
6
Table of Figures
Figure 1 Web Application Footer ................................................................................................. 12
Figure 2: Heading Hierarchy ........................................................................................................ 17
Figure 3: Input Text Fields ............................................................................................................ 27
Figure 4: Dropdown Menu ............................................................................................................ 28
Figure 5: Checkbox States (selected, deselected, normal, disabled) ........................................ 30
Figure 6: Radio Button States (selected, deselected normal, disabled) ................................... 31
Figure 7: Checkboxes in a Fieldset............................................................................................... 33
Figure 8: Radio Buttons in a Fieldset ........................................................................................... 33
Figure 9: Day of Birth Using Three Textboxes ............................................................................. 34
Figure 10: Domestic and International Textboxes ...................................................................... 34
Figure 11: Required Field Text ..................................................................................................... 35
Figure 12: Required Field Asterisk ............................................................................................... 35
Figure 13: Optional Field Text ...................................................................................................... 35
Figure 14: Field with Focus .......................................................... Error! Bookmark not defined.
Figure 15: Field Without Focus .................................................... Error! Bookmark not defined.
Figure 16: Focused Field with Tooltip ......................................................................................... 37
Figure 17: Linked Set of Instructions ........................................................................................... 38
Figure 18: Labels with Placeholder Text ..................................................................................... 38
Figure 19: Alerts for Success, Warning, Error, Information ........................................................ 39
Figure 20: Bordered Table............................................................................................................ 40
Figure 21: Borderless Table ......................................................................................................... 40
Figure 22: Primary Buttons .......................................................................................................... 42
Figure 23: Secondary Buttons...................................................................................................... 42
Figure 24: Button Having Focus ................................................................................................... 42
Figure 25: Disabled Button .......................................................................................................... 43
Figure 26: Big Button .................................................................................................................... 43
Figure 27: Buttons with Action Icons ........................................................................................... 44
Figure 28: Determinate Progress Bars ......................................................................................... 45
Figure 29: Indeterminate Progress Bar ....................................................................................... 45
Figure 30: Loading Icon ................................................................ Error! Bookmark not defined.
Figure 31: Simple Breadcrumb Trail ............................................................................................ 47
Figure 32: Large, Medium, and Small Search Bars ..................................................................... 47
SEVP SYSTEM Style Guide
7
Figure 33: Accordion Content ...................................................................................................... 49
Figure 34: Global Navigation ....................................................................................................... 50
Figure 35: Sidebar Navigation ..................................................................................................... 52
1 INTRODUCTION
The Student Exchange and Visitor Program (SEVP ) strives to better serve its users by
implementing products that provide effective access to information that help its users make
informed decisions to carry out the SEVP mission.
This Style Guide is a resource for SEVP to produce effective and visually-consistent products
that are easy for users to access, practice, and understand. This guide includes design
principles, guidelines for front-end development, and visual identity standards for common
user interface elements. The guide is a living document and will continue to evolve for SEVP
and the users of its products
2 HOW TO USE THIS GUIDE
This document is organized such that the universal elements, i.e., the most used design
elements, are presented up front. Where applicable each design element is accompanied
with supporting explanation to include all or any: accessibility, usability, references, and
external links to source documents.
This guide provides a picture of the design element from a design point of view. This figure is
a design artifact that gives the front-end developers a target to implement in HTML and CSS.
The majority of figures included in this document are surrounded by a fine lined box; this box
should not be implemented in SEVP.
All Accessibility information is provided from U.S. Web Design Standards, established Section
508 methods, and other industry led best practices.
Throughout the remaining sections of this Style Guide this icon is used to provide a direct
link to source content, most commonly from the U.S. Wed Design Standards Framework.
Additionally, Citations are provided as appropriate and fully attributed at the end of this
document.
SEVP SYSTEM Style Guide
8
3 FRONT-END GOALS
3.1 Accessibility
Accessibility is one of the most important aspects of modern web development. Accessibility
means the greatest number of users can access and interact with the content of the product.
Users of all types will have a better experience if accessibility is designed and built in the
product. And least of all, it is required by law for all federal Electronic and Information
Technology (EIT) products.
The implementation of accessibility features is most effective when incorporated into agile
development processes. It is difficult and adds risk when accessibility features are developed
at the end of a project. However, if taken into account throughout, it is straight forward and
cost effective. The best and perhaps only way to ensure this is done is training and education.
Every member of a software development project should be aware of what accessibility
requirements are and a basic understanding of how they are implemented.
Accessible Rich Internet Applications (ARIA) define a way to make web content and web
applications more accessible to people with disabilities. It helps with dynamic content and
advanced user interface controls developed with Hypertext Markup Language (HTML) in
combination with JavaScript and related technologies.
This style guide provides best practices and standards to give project teams the tools they
need to create websites and web applications that are accessible to all users, regardless of
browser, device or disability. The guidelines provide conformance with Section 508
requirements.
3.2 Responsive web design (RWD)
RWD is an approach and methodology for cross-platform compatibility. Its purpose is to
allow the same web page to render a specific view depending on the device’s viewport. It is
an approach to web design aimed at crafting sites to provide an optimal viewing and
interaction experience—easy reading and navigation with a minimum of resizing, panning,
and scrolling—across a wide range of devices (from desktop computer monitors to mobile
phones). RWD allows the code to be device agnostic and adaptable to future generations of
devices.
SEVP SYSTEM Style Guide
9
3.3 Graceful degradation
Graceful degradation is the practice of building web functionality so that it provides a certain
level of user experience in more modern browsers, but it will also degrade gracefully to a
lower level of user experience in older browsers. This lower level is not as nice to use for
users, but it does provide them with the basic functionality.
3.4 Progressive enhancement
Progressive enhancement provides an accessible alternative to HTML content served by the
user interface (UI). It should be seen as an alternative to graceful degradation, where older
browsers with less features simply omit content that they are unable to render. With
progressive enhancement, a basic presentable view of the content is always available, and
then any additions that may not be fully supported for all end users are added to it.
4 BUILD OR IMPLEMENT UI FRAMEWORK
Creating a UI framework that is flexible, follows latest standards, thoroughly tested takes a
lot of work and could become a project in itself. With the rise of mobile devices making
responsive websites and keeping up with the latest technologies is time consuming.
Designers and developers need a solid foundation that provides everything a typical web
application would require but is flexible enough for customization. There are dozens of open-
source UI Frameworks to choose from.
Weather creating or implementing an existing one, the following components should be
present in a UI framework compliant with Section 508.
Grid System
Color palette
Form Controls
Typography
Tables
Buttons
Icons
Additionally, it should have an extensive list of components and/or design patterns, as the
ones listed below:
SEVP SYSTEM Style Guide
10
Dropdowns
Button Groups
Navigation Bar
Breadcrumbs
Labels & Badges
Alerts
Progress Bar
Considerations on choosing a UI framework
License
Before development starts with a framework; investigate licensing requirements from the
distributor. Ideally the framework should be open-source. An open-source license is a type of
license for computer software and other products that allows the source code, blueprint or
design to be used, modified and/or shared under defined terms and conditions. This allows
end users to review and modify the source code, blueprint or design for their own
customization, curiosity or troubleshooting needs.
Design Patterns
The framework should provide foundation of the most common design patterns, navigation,
pagination, form validation, tables, form controls, the more the better.
Learning Curve
Choose one that has the smallest possible learning curve, considering your team’s expertise
in User Interface and Front-end Development.
Documentation
Look for a framework which has thorough documentation with plenty of examples, snippets,
sample code, articles and tutorials.
Community
The communities behind a framework make or break the framework. Choose a framework
which has a friendly community which helps developers new to the platform.
Bug Fixes/ Updates
Choose a framework which is updated often, is open about the bugs it finds, and more
importantly fixes the bugs people come across as soon as possible.
SEVP SYSTEM Style Guide
11
Mobile First
Choose a framework that provides a fluid resizing grid which, arguably offers the most
compelling mobile first story.
Popularity
Bigger popularity means more people involved in the project, and thus increasing tutorials
and articles from the community, real-world examples/websites, third-party extensions, and
better integration with relative web development products. Great popularity also means that
the framework is future-proof – a framework with a bigger community around it is much less
likely to be abandoned.
4.1 U.S. Web Design Standards
Built and maintained by U.S. Digital Service and 18F designers and developers, the U.S. Web
Design Standards follows industry-standard web accessibility guidelines. It reuses the best
practices of existing style libraries and modern web design. It provides a guide for creating
beautiful and easy-to-use online experiences for the users of U.S. Government websites and
web applications.
The U.S. Web Design Standards should be put into consideration for any new development of
government websites and or applications, (Community 1. , U.S. Web Design Standards, 2015).
5 STYLE
5.1 Branding
5.1.1 Header
Each layout must have a well-defined header and footer. The primary purpose of your header
is to promote the agency's/ department's brand and make it instantly recognizable to the
audience. An effective header should instantly communicate to its audience if they have
arrived at the correct place. The header is the most valuable space on the screen. Or, in
designer’s terms – it is the most expensive piece of screen real estate. The header should
always be used wisely, keeping in mind the goals and vision of the web application.
Keep it small: make sure the header does not take up too much space.
Keep as much screen space available as possible for other content.
Keep it consistent: make sure the look and feel and functionality do not change
throughout the application.
SEVP SYSTEM Style Guide
12
SKeep the header relevant: do not put in irrelevant images or content that does not
convey what the web application of the agency/ department does.
Figure 1: Web Application Header
5.1.2 Footer
Footers serve site visitors who arrive at the bottom of a page without finding what they want.
Figure 1 Web Application Footer
5.2 Color
5.2.1 Verify Color and Contrast
The Web Content Accessibility Guidelines (WCAG) says content should be distinguishable and
require designers/developers make it easier for users to see and hear content including
separating foreground from background. WCAG 2.0 level AA requires a contrast ratio of 4.5:1
for normal text and 3:1 for large text (14 point and bold or larger, or 18 point or larger). Level
AAA requires a contrast ratio of 7:1 for normal text and 4.5:1 for large text.
Conforming to a standard means the web application meets or satisfies the 'requirements' of
the standard. In WCAG 2.0 the 'requirements' are the success criteria. To conform to WCAG 2.0
requirements about color contrast, the web application needs to satisfy the success criteria,
that is, there is no content which violates the success criteria.
Conformance level AA: Contrast 4.5:1 or 3:1 for big text (18pt/14pt bold).
If links are not underlined, there must be 3:1 contrast between link text and body text
and all text must still meet other contrast requirements. There also must be an
SEVP SYSTEM Style Guide
13
additional change (e.g., underlining) when it is hovered over or receives keyboard
focus.
Ensure color is not used as the sole method of conveying content or distinguishing
visual elements.
Print on a grayscale printer to test contrast and color.
(Community W. , 2015)
5.2.2 Palette
This palette is designed to support a range of distinct visual styles that continue to feel
connected. The intent of the palette is to convey a warm and open American spirit, with
bright saturated tints of blue and red, grounded in sophisticated deeper shades of cool blues
and grays. These colors — combined with clear hierarchy, good information design, and
ample white space — should leave users feeling welcomed and in good hands.
This is a simple, minimalist color palette. Shades of blue dominate, providing a neutral
backdrop on which brighter shades, clean type treatment, and bright white content areas
"pop" on the page, (Community 1. , Visual Style, 2015).
5.2.3 Primary Colors
This palette’s primary colors are blue, gray, and white. Blue is commonly associated with
trust, confidence, and sincerity; it is also used to represent calmness and responsibility.
#0071bc
primary
#205493
primary-darker
#112e51
primary-darkest
#212121
base
SEVP SYSTEM Style Guide
14
#323a45
gray-dark
#aeb0b5
gray-light
#ffffff
white
5.2.4 Secondary Colors
These are accent colors to provide additional lightness and style to pages looking for a more
modern flair. These colors should be used to highlight important features on a page, such as
buttons, or for visual style elements, such as illustrations. They should be used sparingly and
never draw the eye to more than one piece of information at a time.
#02bfe7
primary-alt
#046b99
primary-alt-
darkest
#00a6d2
primary-alt-
dark
#9bdaf1
primary-alt-
light
#e1f3f8
primary-alt-
lightest
#e31c3d
secondary
#981b1e
secondary-
darkest
#cd2026
secondary-dark
#e59393
secondary-light
#f9dede
secondary-
lightest
5.2.5 Background Colors
#323a45
gray-dark
#5b616b
gray
#aeb0b5
gray-light
#d6d7d9
gray-lighter
#f1f1f1
gray-lightest
#494440
gray-warm-dark
#e4e2e0
gray-warm-light
SEVP SYSTEM Style Guide
15
These colors are used largely for background blocks and large content areas. When
alternating between tones, be sure to use enough contrast between adjacent colors.
5.2.6 Tertiary Colors
These colors are used primarily for content-specific needs, such as alerts and illustrations.
They should never overpower the primary colors.
#fdb81e
gold
#f9c642
gold-light
#fad980
gold-lighter
#fff1d2
gold-lightest
#2e8540
green
#4aa564
green-light
#94bfa2
green-lighter
#e7f4e4
green-lighter
#205493
cool-blue
#4773aa
cool-blue-light
#8ba6ca
cool-blue-lighter
#dce4ef
cool-blue-lightest
5.2.7 Special State Colors
#3e94cf
focus
#4c2c92
visited
#112e51
primary-darkest
#dce4ef
gray-cool-light
SEVP SYSTEM Style Guide
16
5.3 Typography
U.S. government websites have common typographic needs: clear and consistent headings,
highly legible body paragraphs, clear labels, and easy-to-use input fields. Designed by Paul D.
Hunt, Source Sans Pro is the ultimate corporate-style sans-serif web font.
The font itself is not the most exciting one on this list, but it is probably the most professional.
It works in pretty much every situation and it keeps legibility with every size, (Bacic, 2014). It
is designed for legibility and can beautifully adapt to a variety of visual styles, (Community 1.
, Visual Style, 2015). Readable text allows users to efficiently read and take in textual
information, whereas text that is not readable turns off readers or makes it challenging for
them to stay focused. The following guidelines promote good readability.
5.3.1 Content Hierarchy
These principles are not all there is to know about content hierarchy in web design, but
understanding these simple related concepts and applying them to your web application can
make for far more satisfying and effective UI.
SEVP SYSTEM Style Guide
17
5.3.1.1 HTML Headings
Figure 2: Heading Hierarchy
Size
The size can relate to both the size of the individual pieces of the content as well as other
design elements, such as imagery, and how these play off against each other. For example,
use size to draw attention to main headings. Ensure that they are larger than the main
content shows that they have a different level of importance and are something that the user
needs to pay attention to.
Size is also good for breaking up the content on a page into smaller chunks and emphasizing
small parts of content that are important. Use size to take the emphasis away from certain
elements or bits of content that want to be less noticeable or aren’t as important as the rest.
Font Weights & Font Styles
Use font weights and styles to add more subtle emphasis to parts of the content. Using font
weights that are heavier than the rest of the or in a different font style (such as italic) can be
SEVP SYSTEM Style Guide
18
great for adding emphasis to little bits of content that might want to pull out and give a bit
more recognition, without overpowering the rest of the design.
Color
Varying color is another effective way to divide and display the content of the web
application. Use it to subtly add focus to areas of the design, either by blocking off areas of
content or using it within your content to add emphasis to text that might require it.
Position & Alignment
How position the content has a big impact on how it’s perceived by users. Ensuring to work
with a grid system and align the content well is very important because creates order in your
design.
Proximity & Whitespace
Looking at how close or far apart elements in the design are spaced is essential to building a
visual content hierarchy that has impact and makes sense. If elements which are related are
too far apart, it will break the flow for the user when they’re reading the page. However, the
same can be said for elements that are spaced far too close together. Things which are too
cramped are going to be difficult to understand in terms of what has the most importance or
should have the most emphasis.
5.3.1.2 Usability
Alignment
Flush left type provides the eye a constant starting point for each line, making text easier to
read, (Community 1. , U.S. Web Design Standards, 2015).
Line length Controlling the length of lines of text in extended copy makes reading more comfortable by
helping readers’ eyes flow easily from one line to the next. Somewhere between 50 and 75
characters per line is broadly considered to be a readable line length, while 66 characters is
considered the ideal, (Community 1. , U.S. Web Design Standards, 2015).
Spacing
White space affects how the user focuses their attention on the content. It makes it easier to
know what to read and where to begin. Spacing between typographic elements should be
SEVP SYSTEM Style Guide
19
open enough to feel light, but close enough to establish a proper relationship between
elements, (Community 1. , U.S. Web Design Standards, 2015).
Line Height
Line height is a very common term meaning the space between individual lines of text. Line
height is another factor in the readability of body text and even headers. Sufficient line height
is especially important in Web design because it makes the text ultimately more scannable.
Letter Spacing
Similar to line height, letter spacing affects readability in Web typography. Letter spacing is,
as the name suggests, the space between each letter in words, letter spacing is an obvious
factor in legibility.
Line Length
Line length is often overlooked in Web typography but should not be. Line length is, of
course, the number of characters per line. A good line length is one that allows the reader’s
eyes to flow from the end of one line to the beginning of the next very easily and naturally.
Contrast
Contrast is the core factor in whether or not text is easy to read. Good contrasts will make
text easy on the eyes, easy to scan quickly and overall more readable.
For accessibility refer to Verify Color and Contrast section.
5.3.1.3 Typeface
Typeface in a web application is defined by the font-family property in CSS, it is
recommended to let this property hold several font names as a "fallback" system, to ensure
maximum compatibility between browsers/operating systems. If the browser does not
support the first font, it tries the next font.
Start with the font the application uses as default, and end with a generic family, to let the
browser pick a similar font in the generic family, if no other fonts are available. E.g.
Font-family: "Source Sans Pro", sans-serif;
UI frameworks provide ways to easily change typeface at global scale.
SEVP SYSTEM Style Guide
20
5.3.1.4 Recommended Generic Font Family
Sans-serif is the recommended generic font family. Sans-serif fonts do not have decorative
markings, or serifs, on their letters. These fonts are often considered easier to read on
screens.
5.3.1.5 Web-safe fonts
When possible it is recommended to use web-safe fonts. This fonts likely to be present on a
wide range of computer systems, and used by Web content authors to increase the likelihood
that content displays in their chosen font.
5.4 Links
Hypertext links are one of the most basic elements of HTML. As such, making hypertext links
accessible is one of the most basic and most important aspects of web accessibility. Standard
hypertext links work with all technologies, platforms, and users of all abilities can access
them, whether directly or through the use of some sort of assistive technology. Because links
are so basic to the functionality of web content, inaccessible links are one of the most severe
barriers to overall accessibility.
Figure 4: Linked text
5.4.1 Usability
Don’t use the word “link” in your links.
Don’t capitalize links: There are two problems with capitalized text in links.
First, some screen readers read capitalized text letter-by-letter. The second problem is
that capital letters are harder to read (for everyone, but especially people with reading
disabilities).
Keep link text concise.
SEVP SYSTEM Style Guide
21
Alert the user when opening new windows.
Design with keyboard-only users in mind.
Make the style of your links consistent.
Ensure that the color of the link text contrasts sufficiently with the background color.
Links are underlined and/or are a different color value (lighter or darker) than the
main text.
5.4.2 Accessibility
Users must be able to navigate to and select each link using the keyboard alone. In most
browsers, the Tab key allows users to jump from link to link, and the Enter key allows users
to select a link. If the only way to access a link is with a mouse, the link is unusable by people
who cannot use a mouse.
5.5 Lists
Lists organize written information for users. To-do lists determine what to get done.
Navigational routes provide turn-by-turn lists of directions. Recipes provide lists of
ingredients and lists of instructions. With a list for nearly everything, it’s easy to understand
why they are also popular.
HTML provides three different types of lists to choose from: unordered, ordered, and
description lists. Choosing which type of list to use—or whether to use a list at all—comes
down to the content and the most semantically appropriate option for displaying that
content.
There are multiple ways to style these lists with CSS. For example, we can choose what type
of marker to use on a list. The marker could be square, round, numeric, alphabetical, or
perhaps nonexistent. Also, we can decide if a list should be displayed vertically or
horizontally. All of these choices play significant roles in the styling of web pages.
Figure 5: Unordered List
Figure 6: Ordered List
Figure 7: Definition List
SEVP SYSTEM Style Guide
22
5.5.1 Usability
When to use
Use an ordered list when to display text in some ranking, hierarchy, or series of steps.
Use unordered lists to display text in no specific order.
Use a definition list to outline multiple terms and their descriptions, as in a glossary.
When to consider something different
If there is a need to communicate long lists of narrative text.
Guidelines
Use sentence case and begin lists with a capital letter.
Use punctuation appropriate to the text. Do not leave sentences without periods.
5.6 Grid System
Over the past few years CSS grid systems have grown a lot in popularity, quickly becoming
considered best practice for rapid layout scaffolding. As a result, there has been no shortage
of frameworks popping up offering their own grid systems trying to garner favor.
In basic terms, a grid system is a structure that allows for content to be stacked both
vertically and horizontally in a consistent and easily manageable fashion. Additionally, grid
system code is project-agnostic giving it a high degree of portability so that it may be
adopted on new projects.
5.6.1 The Benefits
They increase productivity by providing simple and predictable layout scaffolding to HTML
design. The structure of a page can be formulated quickly without second guessing its
precision or cross-browser compatibility.
They are versatile in how layouts can be constructed, being adaptable in varying
combinations of rows and columns. They even support nested grids for more complex use
cases. No matter the layout requirements, a grid system is almost certainly well suited.
They are ideal for responsive layouts. This is where grid systems reign supreme. They make it
incredibly easy to create mobile friendly interfaces that are adaptable to different sized
viewports.
SEVP SYSTEM Style Guide
23
5.6.2 Accessibility
Low-vision users should be able to increase the size of the text by up to 200 percent
without breaking the layout.
5.6.3 Usability
When to use
Almost always use a grid layout — visitors can read more quickly on pages that use
grids. Choose a single grid system for your entire site.
When to consider something else
Avoid mixing different grid systems.
5.6.4 Guidance
It is recommended to choose a 12-column grid with flexible column widths and fixed
gutters. The width of the padding on the left and right edge of the grid depends on
device size.
Avoid text lines longer than 75 characters. Place text in narrower grid boxes to keep
text lines from becoming too wide.
18f (Community 1. , Grids, 2015)
5.7 Images and Icons
Icons are most effective when they improve visual interest and grab the user's attention. They
help guide users while they're navigating or interacting with the application. The primary
attribute for icons is being a common visual language which effectively bridges language
gaps. They should be instantaneously recognizable and remove open interpretation.
5.7.1 Images
Adding alternative text for images is the first principle of web accessibility. It is also one of the
most difficult to properly implement. The web is replete with images that have missing,
incorrect, or poor alternative text. Like many things in web accessibility, determining
appropriate, equivalent, alternative text is often a matter of personal interpretation.
Alternative text provides a textual alternative to non-text content in web pages.
SEVP SYSTEM Style Guide
24
5.7.1.1 Accessibility
Alternative text serves several functions:
It is read by screen readers in place of images allowing the content and function of the
image to be accessible to those with visual or certain cognitive disabilities.
It is displayed in place of the image in browsers if the image file is not loaded or when
the user has chosen not to view images.
It provides a semantic meaning and description to images which can be read by
search engines or be used to later determine the content of the image from page
context alone.
5.7.2 Image Sprites or Web Icon Fonts
Choosing which of these to use depends upon the context within the application. For highly
detailed images, and not just simple icons, then create an image sprite. Otherwise for simple
icons, a web icon font has a lot of distinct advantages. They are especially useful for mobile
devices where icons play a much larger role in most designs. The best solution is not just to
choose one, but to integrate both into the web application.
5.7.2.1 Colors
It is recommended to use one solid color for system icons.
It is recommended to choose either black or white for system icons, or any other
primary UI color.
Refer to the Verify Color and Contrast section.
5.7.2.2 Sizes
Icons can vary in size.
When scaling icons, ensure the sizes used appear sharp on standard and high Pixels
Per Inch (PPI) screens
5.7.2.3 Usage
For performance, create icon bundles (sprites) containing only used icons.
Make sure that every image has <title> elements and ALT attributes that are
descriptive and accurate.
SEVP SYSTEM Style Guide
25
5.7.3 Image Maps
A client-side image map is an image divided into selectable regions defined by <area>
elements (“hotspots”) that allow user interaction. Usually the selectable regions are links to
other pages. For image maps, text alternatives are needed on both the <img> element itself
(to convey the informative context) and on each of the <area> elements (to convey the link
destination or the action that will be initiated if the link is followed), (Eggert, 2015).
5.7.3.1 Accessibility
Provide text alternatives that serve the same purpose as the selectable regions of an image
map. An image map is an image divided into selectable regions defined by area elements.
Each area is a link to another Web page or another part of the current Web page. The alt
attribute of each area element serves the same purpose as the selectable area of the image.
5.7.3.2 Usability
When to use
Use image maps when the information you need to convey is better presented visually
than in text. The best use of an image map is for, well, a map. Maps convey a large
amount of information in a small space. And image maps make them more
interactive.
When to consider something else
Never use image maps for navigation.
Guidelines
Use every image map only once and if multiple images with the same map are to be
used, the map should be duplicated and have a different IDs.
Place the <map> element as a direct sibling to the image.
Include alt text in your maps and to include the links within the map somewhere else
on the page as plain text.
SEVP SYSTEM Style Guide
26
6 COMPONENTS
6.1 Form Controls
Form controls allow a user to enter information into a page by using methods of collection
outlined in the chosen framework. Any customization to the form controls must meet
accessibility requirements. U.S. Web Standards framework includes: text input, drop down,
check boxes, radio buttons, text area, and date input form controls, (Community 1. , Form
Controls, 2015).
6.1.1 Form Layout
It is recommended forms should be laid out vertically in a single column. Human beings
understand progress in forms as being vertically driven. Multiple columns are discouraged.
This is not a hard-and-fast rule, however; in some cases multiple columns can be utilized but
this should be rare and typically only applied to a single form element grouping (such as
"Password" and "Confirm Password").
Though these guidelines can help better position a form for your specific purpose, the
combination of layout, visual elements, and content that's right for you should still be
verified through user testing or data analysis (Wroblewski, 2005).
6.1.2 Label Position
Like all elements of an interface’s design, consistency with label positioning helps users and
minimizes errors. This is because the brain is wired for patterns; when positioning is
consistent the brain will rapidly learn where to look for labels. This means it’s best if you can
stick just one approach per form, (Enders, 2014).
Localization. Translated labels may be significantly longer in other languages.
Further, left-to-right languages (e.g., Arabic) naturally work better this way.
Human Eye Behavior. Human beings naturally group elements in vertical proximity
together.
6.1.3 Text Input
Text inputs allow people to enter any combination of letters, numbers, or symbols of their
choosing (unless otherwise restricted). Text input boxes can span single or multiple lines.
SEVP SYSTEM Style Guide
27
Figure 3: Input Text Fields
6.1.3.1 Accessibility
Customized text inputs should continue to meet the accessibility requirements that apply
to all form controls.
Avoid placeholder text for accessibility reasons. Most browsers’ default rendering of
placeholder text does not provide a high enough contrast ratio.
Avoid breaking numbers with distinct sections (such as phone numbers, Social
Security Numbers, or credit card numbers) into separate input fields. For example, use
one input for phone number, not three (one for area code, one for local code, and one
for number). Each field needs to be labeled for a screen reader and the labels for fields
broken into segments are often not meaningful, (exceptions may be made for existing
systems and need only to apply to new systems only)
6.1.3.2 Usability
When to use
If you can’t reasonably predict a user’s answer to a prompt and there might be wide
variability in users’ answers.
When using another type of input will make answering more difficult. For example,
birthdays and other known dates are easier to type in than they are to select from a
calendar picker.
When users want to be able to paste in a response.
SEVP SYSTEM Style Guide
28
When to consider something else
When users are choosing from a specific set of options.
Guidance
The length of the text input provides a hint to users as to how much text to write. Do
not require users to write paragraphs of text into a single-line input box; use a text
area instead.
Text inputs are among the easiest type of input for desktop users but are more
difficult for mobile users.
Only show error validation messages or stylings after a user has interacted with a
particular field.
Avoid using placeholder text that appears within a text field before a user starts
typing. If placeholder text is no longer visible after a user clicks into the field, users will
no longer have that text available when they need to review their entries. (People who
have cognitive or visual disabilities have additional problems with placeholder text.)
6.1.4 Dropdown
A dropdown allows users to select one or more options from a list, (Community 1. , Visual
Style, 2015).
Figure 4: Dropdown Menu
6.1.4.1 Accessibility
When customizing the dropdown, ensure it continues to meet the accessibility
requirements that apply to all form controls.
SEVP SYSTEM Style Guide
29
Make sure the dropdown has a label. Don’t replace it with the default menu option (for
example, removing the “State” label and just having the dropdown read “Select a
state” by default).
Don’t use JavaScript to automatically submit the form (or do anything else) when an
option is selected. Auto-submission disrupts screen readers because they select each
option as they read them.
6.1.4.2 Usability
When to use
Use sparingly — only when a user needs to choose from about seven to 15 possible
options and you have limited space to display the options.
When to consider something else
If the list of options is very short (three options or less). Use radio buttons instead.
If the list of options is very long. Let users type the same information into a text input
that suggests possible options instead.
If you need to allow users to select more than one option at once. Users often don’t
understand how to select multiple items from dropdowns. Use checkboxes instead.
For site navigation (use the navigation components instead).
Guidance
Test dropdowns thoroughly with members of your target audience. Several usability
experts suggest they should be the “UI of last resort.” Many users find them confusing
and difficult to use.
Avoid making options in one dropdown menu change based on the input to another.
Users often don’t understand how selecting an item in one impacts another.
When most users will (or should) pick a particular option, make it the default: <option
selected="selected">Default</option>
Don’t use JavaScript to automatically submit the form (or do anything else) when an
option is selected. Offer a “submit” button at the end of the form instead. Users often
change their choices multiple times. Auto-submission is also less accessible.
SEVP SYSTEM Style Guide
30
6.1.5 Checkboxes
Checkboxes allow users to select one or more options from a visible list.
The use of select elements with the multi attribute is discouraged. In cases where the user can
select multiple options from a discrete set, a checkbox grouping is suggested instead.
The drawbacks of the "multi select" are many but two primary reasons stand out:
The element is rarely used. As a result, not many users innately understand how they
work.
Not all values are typically visible to the user. Additional scrolling is required. Again,
users may not understand the control.
Figure 5: Checkbox States (selected, deselected, normal, disabled)
6.1.5.1 Accessibility
If you customize the checkboxes, ensure they continue to meet the accessibility requirements
that apply to all form controls.
Surround a related set of checkboxes with a <fieldset>. The <legend> provides context
for the grouping. Do not use fieldset and legend for a single check.
Each input should have a semantic id attribute, and its corresponding label should
have the same value in it’s for attribute.
The title attribute can replace <label>.
6.1.5.2 Usability
When to use
SEVP SYSTEM Style Guide
31
When a user can select any number of choices from a set list.
When a user needs to choose “yes” or “no” on only one option (use a stand-alone
checkbox). For example, to toggle a setting on or off.
When users need to see all the available options at a glance.
When to consider something different
If there are too many options to display on a mobile screen.
If a user can only select one option from a list (use radio buttons instead).
Guidelines
Users should be able to tap on or click on either the text label or the checkbox to
select or deselect an option.
List options vertically if possible; horizontal listings can make it difficult to tell which
label pertains to which checkbox.
Avoid using negative language in labels as they can be counterintuitive. For example,
“I want to receive a promotional email” instead of “I don’t want to receive
promotional email.”
If customized, make sure selections are adequately spaced for touch screens.
6.1.6 Radio Buttons
Radio buttons allow users to see all available choices at once and select exactly one.
Figure 6: Radio Button States (selected, deselected normal, disabled)
6.1.6.1 Accessibility
If you customize the radio buttons, ensure they continue to meet the accessibility
requirements that apply to all form controls.
SEVP SYSTEM Style Guide
32
Group related radio buttons together with <fieldset> and describe the group with
<legend>.
Each radio button should have a <label>. Associate the two by matching the <label>’s
for attribute to the <input>’s id attribute.
The title attribute can replace <label>.
6.1.6.2 Usability
When to use
When users need to select only one option out of a set of mutually exclusive choices.
When the number of available options can fit onto a mobile screen.
When to consider something else
Consider checkboxes if users need to select more than one option or if there is only
one item to select.
Consider a dropdown if you don’t have enough space to list out all available options.
If users should be able to select zero of the options.
Guidance
Users should be able to tap on or click on either the text "label" or the radio button to
select or deselect an option.
Options that are listed vertically are easier to read than those that are listed
horizontally. Horizontal listings can make it difficult to tell which label pertains to
which radio button.
If you customize, make sure selections are adequately spaced for touch screens.
Use caution if you decide to set a default value. Setting a default value can discourage
users from making conscious decisions, seem pushy, or alienate users who don’t fit
into your assumptions. If you are unsure, leave nothing selected by default.
6.1.7 Fieldset
The grouping and labelling of thematically related controls within a form is an important
aspect of providing semantic information so users can understand and complete a form
successfully.
SEVP SYSTEM Style Guide
33
Figure 7: Checkboxes in a Fieldset
Figure 8: Radio Buttons in a Fieldset
6.1.7.1 Accessibility
The HTML 5.1 draft specification provides a method for grouping and labeling related form
controls. This capability is provided by the use of the <fieldset> and <legend> elements,
(Fieldsets, Legends and Screen Readers, 2007).
When to use
The <fieldset> element allows authors to group thematically related controls and
labels. Grouping controls makes it easier for users to understand their purpose while
simultaneously facilitating tabbing navigation for visual user agents and speech
navigation for speech-oriented user agents.
The proper use of this element makes documents more accessible.
Whenever a label is needed to provide information about a related set of controls
consider using the LEGEND and FIELDSET elements.
6.1.7.2 Usability
Using a fieldset chunk-up multiple questions into, a minimal and clearly
identifiable groups of topics.
Make the page clearer to the sighted user, or the user who may have cognitive
difficulties.
6.1.8 Date and Phone Number Input
The text fields are the easiest way for users to enter most dates. The max limit for should be
changed depending on the context of the form
These text fields should follow the accessibility guidelines for all text inputs.
SEVP SYSTEM Style Guide
34
Do not use JavaScript to auto advance the focus from one field to the next. This makes
it difficult for keyboard-only users to navigate and correct mistakes (exceptions may
be made for existing systems and need only to apply to new systems only)
Figure 9: Day of Birth Using Three Textboxes
Figure 10: Domestic and International phone
number
6.1.8.1 Usability
When to use
Use this format for most dates, particularly memorized dates.
When to consider something else
If users are trying to schedule something, a calendar picker might make more sense.
Be sure to also provide an option for text entry as well.
Guidelines
Be sure each field is properly labeled — some countries enter dates in day, month, and
year order.
It may be tempting to switch all or some of these text fields to drop downs, but these
tend to be more difficult to use than text boxes.
6.1.9 Required and Optional Fields
In the past, common practice has been to indicate on a form when fields are required and
assume all non-required fields are optional. However, over the past years, users have been
educated to assume that most fields are required and that few are optional (since this is
generally true).
SEVP SYSTEM Style Guide
35
Indicating both optional and required fields is overkill, so only the least common type is to be
indicated. Thus, if a form has 6 fields and only 2 are optional, the two optional entries should
be indicated. If a form has only one required field that should be called out.
For very short forms (such as a login form), it is not necessary to place any indications.
For long forms (more than 5 fields), a short notice should be given at the top indicating the
general state (e.g., "All field are required", or "All fields are optional except where noted",
etc.).
Optional fields should be indicated with a text string, "(Optional)", directly after the field
name. This should be in a smaller font and in a lower-intensity color.
Required fields should be indicated with a text string, "(Required)" or a symbol “*”, directly
after the field name. This should be in a smaller font and a red color.
Figure 11: Required Field Text
Figure 12: Required Field Asterisk
Figure 13: Optional Field Text
SEVP SYSTEM Style Guide
36
6.1.10 Focus Behaviors
When a text element is focused (has the cursor in it), its border should change color to
indicate that it is active. The framework chosen may have a default appearance. Many
modern browsers do this automatically.
Figure 14: Field with Focus
Figure 15: Field Without Focus
6.1.11 Tooltip Behaviors
Many tooltips always have arrows but the framework may have an alternative default look
and feel. The tool tip icons should be obvious and relatively large so that individuals with
poor eyesight can readily connect the help text with the element that it is referencing
(otherwise, they appear as random blobs of text without context).
SEVP SYSTEM Style Guide
37
Figure 16: Focused Field with Tooltip
6.1.11.1 Accessibility
The tooltip widget can be displayed via keyboard focus or by the onmouse event.
The tooltip widget can be hidden by removing focus from the text box or by moving
the mouse off the textbox.
The tooltip widget can be hidden by pressing the Escape key
6.1.11.2 Usability
It is recommended that tooltips should never obscure the field that they are attached to. As
such, the gravity should be northward. In some cases, a southward gravity may be applied (if
the trigger is below the element in question, but this should be rare).
The tooltip or infotip or a hint is a common graphical user interface element. It is used in
conjunction with a cursor, usually a pointer. When the pointer hovers over an item, without
clicking it, and a tooltip may appear—a small "hover box" with information about the item
being hovered over.
6.1.12 Form Control Instructions
Some form elements will benefit by the inclusion of a short set of instructions. Instructions
should be placed on a line below the field name and above the input mechanism in a smaller,
greyed font.
Field-level instructions should be short and to the point. If additional information is
necessary, a link should be provided for more information. This link can activate a tooltip or
open further information in a new window or tab. Active links within instructions should
always be underlined.
SEVP SYSTEM Style Guide
38
Figure 17: Linked Set of Instructions
6.1.13 Placeholder Text
Some form elements can benefit from the presence of data "hints". Placeholders help the
user to decide at a glance the type of data a field takes.
Hint text should be placed within the input mechanism. It should be a light color and the text
should be as generic as possible (e.g., "[email protected]" or "(123) 123-1234").
A field with hint text achieves focus (when the cursor is placed within it), the hint text should
become even lighter. Once the user starts typing or inputs data, the hint text should
disappear.
If the user clears the field, the hint text should return. Hint behaviors should be done
exclusively with HTML5 placeholder attributes. Older browsers will not support this.
Figure 18: Labels with Placeholder Text
6.1.13.1 Accessibility
The default color of the placeholder text, in browsers that support placeholder, is not
of sufficient contrast with its default background color. Sufficiency is measured using
the WCAG 2.0 criteria 1.4.3 Contrast (Minimum): The visual presentation of text and
images of text has a contrast ratio of at least 4.5:1.
SEVP SYSTEM Style Guide
39
6.1.13.2 Usability
If you choose to use the placeholder attribute be aware its support across browsers is
incomplete and its styling support is still experimental.
If available, apply a style to the placeholder attribute text that has a contrast ratio of
at least 4.5:1.
6.2 Alerts
Alters keep users informed of important and sometimes time-sensitive changes. Alerts
provide contextual feedback messages for typical user actions, as well as alerting them to
important information they may need to know. Information and warning messages usually
appear at the top of a page, while success and error messages might appear above a form.
Use the appropriate color recommended by the framework for the message.
Figure 19: Alerts for Success, Warning, Error, Information
6.2.1 Feedback
Feedback provides users with the information they need to understand where they are within
the website, and for proceeding to the next activity. Forms of feedback include changing the
color of a link that has been clicked (suggesting that destination has been visited), and using
other visual cues to indicate the active portion of the screen, (Farkas, 2000).
SEVP SYSTEM Style Guide
40
6.3 Tables
Use tables only when presenting tabular data in column and rows. They should not be used
for layout purposes. Follow the guidelines for tables governed by the framework used,
(Community 1. , Tables, 2015).
Figure 20: Bordered Table
Figure 21: Borderless Table
6.3.1 Accessibility
Simple tables can have two levels of headers. Each header cell should have
scope='col' or scope='row'.
SEVP SYSTEM Style Guide
41
Complex tables are tables with more than two levels of headers. Each header should
be given a unique id and each data cell should have a HEADER attribute with each
related header cell’s ID listed.
When adding a title to a table, include it in a <caption> tag inside of the <table>
element.
6.3.2 Usability
When to use
When you need tabular information, such as statistical data.
When to consider something else
Depending on the type of content, consider using other presentation formats such as
definition lists or hierarchical lists.
Guidance
Tables are great at displaying tabular data. Minimal visual styling helps surface this
information more easily.
6.4 Buttons
For short forms with only one button, it is advised to place the button directly below the last
field element and left aligned. Human eye tracking runs vertically and placing the button at
the bottom is most natural psychologically.
However, for forms with multiple buttons, the buttons should be grouped together and right
aligned at the bottom. This creates a psychological "break" in the flow and causes the user's
short term memory to reset, allowing them to process the activity they are undertaking.
Text only links should rarely, if ever, be used for button actions. It is tempting to display
"cancel" events as text but this should be avoided where possible; users have been trained to
see buttons as actionable events and text links as data events. Text can have styling to
appear as a button.
Use larger or smaller button sizes corresponding to the contexts of the task and visual
communication goals.
SEVP SYSTEM Style Guide
42
6.4.1 Primary Buttons
Figure 22: Primary Buttons
6.4.2 Secondary Buttons
Figure 23: Secondary Buttons
6.4.3 Button Focus
Figure 24: Button Having Focus
SEVP SYSTEM Style Guide
43
6.4.4 Disabled and Big Buttons
Figure 25: Disabled Button
Figure 26: Big Button
6.4.4.1 Accessibility
Buttons should display a visible focus state when users tab to them.
Avoid using <div> or <img> tags to create buttons. Screen readers don't automatically
know either is a usable button.
When styling links to look like buttons, remember that screen readers handle links
slightly differently than they do buttons. Pressing the Space key triggers a button, but
pressing the Enter key triggers a link.
6.4.4.2 Usability
When to use
Use buttons for the important actions you want users to take on your site, such as
“next”, “previous”, “cancel”, “save”, "download," "sign up," or "log out."
When to consider something else
If leading users between pages of a website. Use links instead.
Less popular or less important actions may be visually styled as links.
Guidance
Generally, use primary buttons for actions that go to the next step and use secondary
buttons for actions that happen on the current page.
The secondary button: “close” or “cancel” is left justified and in a disabled state.
Make sure buttons should look clickable—use color variations to distinguish static,
hover and active states.
Avoid using too many buttons on a page.
SEVP SYSTEM Style Guide
44
Use sentence case for button labels.
Button colors are defined by the chosen framework if any.
Button labels should be as short as possible with “trigger words” that your users will
recognize to clearly explain what will happen when the button is clicked (for example,
“download,” “view” or “sign up”).
Make the first word of the button’s label a verb. For example, instead of “Complaint
Filing” label the button “File a complaint.”
6.4.5 Button Labels
In general, buttons should say exactly what they are doing and always re-stress what is
happening. "Submit" is bad; "Save Changes" is better. "Cancel" is bad; "Discard Changes" is
better.
6.4.6 Button Iconography
Button iconography is not required but is always a nice touch. With the exception of
continuation buttons, iconography should be placed to the left of the button text.
Continuation button iconography should be placed to the right.
In general, icons on continuation buttons should be arrows pointing right. Buttons that take
the user backwards in a series of steps should contain arrows pointing left.
Other iconography should depend upon the function of the framework. It is acceptable to
only include iconography on continuation buttons.
Figure 27: Buttons with Action Icons
6.5 Progress Control
Sometimes a task running within a program might take a while to complete. A user-friendly
program provides some indication to the user that the task is occurring, how long the task
might take, and how much work has already been done.
SEVP SYSTEM Style Guide
45
A progress control provides feedback to the user that a long-running operation is underway.
A determinate progress bar shows the percentage of completion of an operation. It is also a
good indicator of state or position. An indeterminate progress bar, or a progress ring/wheel,
shows that an operation is underway.
Sometimes you can't immediately determine the length of a long-running task, or the task
might stay stuck at the same state of completion for a long time. You can show work without
measurable progress by putting the progress bar in indeterminate mode.
Figure 28: Determinate Progress Bars
A progress bar in indeterminate mode displays animation to indicate that work is occurring.
As soon as the progress bar can display more meaningful information, you should switch it
back into its default, determinate mode.
Figure 29: Indeterminate Progress Bar
A progress control is read only; it is not interactive.
6.5.1 Activity Indicators
Activity Indicators are very important tools that help users to have an understanding of what
is going on with the system and what are responses from the system. Indicators should be
shown as soon as request starts and hidden when request ends.
6.5.2 Usability
Activity Indicators provide a strong visual clue that request is in progress. They can be shown
as simple text or as an image, usually animated.
SEVP SYSTEM Style Guide
46
If it is in a text form, be sure to provide meaningful message, like “Sending email”
rather than “Waiting…” that could confuse users. What am I waiting for? Is something
wrong with the system?
If it is an animated image they are usually represented by rotating animation.
Figure 30: Loading Icon
The usage of Asynchronous JavaScript and XML (Ajax) in web applications and web sites is
rapidly increasing. If not handled properly Ajax functionalities can break users’ expectations
and conventions.
While one Ajax request is in progress user can start another one which may bring about the
risk of data damage. By double clicking the same button or by clicking on another users can
even cause an application failure. But if that happens it’s not their fault.
This can be easily prevented by disabling UI elements during Ajax request.
Depending on the case, disable a particular element or disable the entire user
interface.
UI elements should be disabled when Ajax request starts and enabled again when
request ends.
Show status message indicating whether operation failed or succeeded.
6.6 Breadcrumbs
Breadcrumb navigation can greatly enhance the way users find their way around. In terms of
usability, breadcrumbs reduce the number of actions a website visitor needs to take in order
to get to a higher-level page, and they improve the findability of website sections and pages.
They are also an effective visual aid that indicates the location of the user within the
website’s hierarchy, making it a great source of contextual information for landing pages.
A “breadcrumb” (or “breadcrumb trail”) is a type of secondary navigation scheme that
reveals the user’s location in a website or Web application. They offer users a way to trace the
path back to their original landing point.
SEVP SYSTEM Style Guide
47
Figure 31: Breadcrumb Trail
7 Search Bar
A block that allows users to search for specific content if they know what search terms to use
or can’t find desired content in the main navigation
Figure 32: Large, Medium, and Small Search Bars
7.1 Accessibility
As you customize this form template, ensure it continues to follow the accessibility
guidelines for form templates and the accessibility guidelines for form controls.
Always include the word "search" inside the <button> element for screen readers. You
can visually hide this text using the proper CSS for the framework.
7.2 Usability
When to use
There will always be users who are confused by your navigation system and who
would benefit from being able to search your site.
When to consider something else
SEVP SYSTEM Style Guide
48
On single-page or very small sites, you may be able to get away without a search bar.
Guidance
Allow the search bar to be as wide as possible, but a minimum of 27 characters wide.
This allows users to enter multiple search terms and still be able to see all of them.
The more users can see their search terms, the easier it is to review, verify, and submit
their search query.
The magnifying glass has been shown to be almost universally recognized by users as
an indicator of search, and doesn’t need to be visually paired with the word "Search"
as long as it remains for screen readers.
Maintain this search bar when displaying the search results with the original search
terms.
On a site's home page the search function should appear as a search box instead of a
link so users can locate it easily.
Don't offer advanced search as the default option. The majority of people will do a
simple search with one or two search terms. If advanced search is offered, it increases
the likelihood of a person making a mistake in their query.
Even if the search bar isn't visually displaying a label, the form field should include a
label for screen reader users.
The search button itself should be a submit button for the form to reduce the number
of keystrokes required to use the form.
8 Accordions
Accordions are a list of headers that can be clicked to hide or reveal additional content.
Usually they are vertically stacked list of headers that can be clicked to reveal or hide content
associated with them. It is one of many ways you can expose content to users in a progressive
manner. Allowing people to have control over the content by expanding it or deferring it for
later lets them decide what to read and what to ignore, (Accordions Are Not Always the
Answer for Complex Content on Desktops, 2014) .
SEVP SYSTEM Style Guide
49
Figure 33: Accordion Content
8.1 Accessibility
Code header areas in the accordion as <buttons> so that they are usable with both
screen readers and the keyboard.
Buttons should state whether they are expanded or not with the appropriate attribute
used by the framework. For example: <aria-expanded=’true’> or <aria-
expanded=’false’>.
Each button in the framework has a unique name <aria-controls=’collapsible-#’> that
associates the control to the appropriate region by referencing the controlled
elements ID.
Each content area in the framework has an <aria-hidden> attribute set to either <true> or <false>. When <true>, the element (and all children) is neither visible nor
perceivable, and assistive technologies will skip this content.
8.2 Usability
When to use
Users only need a few specific pieces of content within a page.
Information needs to be displayed in a small space.
When to consider something else
If visitors need to see most or all of the information on a page. Use well-formatted text
instead.
SEVP SYSTEM Style Guide
50
If there is not enough content to warrant condensing. Accordions increase cognitive
load and interaction cost, as users have to make decisions about what headers to click
on.
Guidance
Allow users to click anywhere in the header area to expand or collapse the content; a
larger target is easier to manipulate.
Make sure interactive elements within the collapsible region are far enough from the
headers that users don’t accidentally trigger a collapse. (The exact distance depends
on the device.)
9 NAVIGATION
Navigation refers to the method used to find information within a Website. Navigation is used
primarily to help users locate and link to destination pages. A Web application’s navigation
scheme and features should allow users to find and access information effectively and
efficiently.
Most web applications use some form of a global horizontal menu. Horizontal navigation bar
is easy to scan, it has become a convention that users understand and expect.
A Main Navigation is a type of navigation that runs on every page, containing links to the
major sections of that web application.
"Home" is the convention for the name of the overall homepage.
Figure 34: Global Navigation
SEVP SYSTEM Style Guide
51
9.1 Accessibility
Add the role="navigation" to the most logical parent container of the <ul>, or wrap a
<nav> element around the whole navigation. Do not add the role to the <ul> itself, as
this would prevent it from being announced as an actual list by assistive technologies.
9.2 Usability
Organize information according to how user interact with it.
Don't force navigation to match internal structures. Use research to understand how
users search for information.
Keep section and page names simple and short
Every page should have a way for a user to get back to the previous page, section
page, and home page
Use descriptive tab labels
Text links should link to the word or phrase that defines the link. Instead of "click here
to find a glossary," try "use our glossary"
Clearly differentiate navigation elements from one another, but group and place them
in a consistent and easy to find place on each page.
10 SIDEBAR/ LOCAL NAVIGATION
Navigation performance is best when the secondary and tertiary menus were placed
together. Placing a navigation menu in the right panel is supported as a viable design option
by both performance and preference measures. On long pages, provide a 'list of contents'
with links that take users to the corresponding content farther down the page; Hierarchical,
vertical navigation to place at the side of a page, (Farkas, 2000).
10.1 Accessibility
Ensure the side navigational system is keyboard accessible. Users should be able to
tab through each link.
10.2 Usability
When to use
To display a navigational hierarchy with one to three levels.
To display the “sub-navigation” within a section of the website.
SEVP SYSTEM Style Guide
52
When to consider something else
If the site has fewer than five pages, consider organizing the page without a
navigational hierarchy.
If your page already has a horizontal and vertical navigation bar, consider ways to
simplify your navigation system.
If your content is within a frame or sub-area of a page, consider ways to simplify your
navigation system.
Guidance
Indicate where a user is within the navigational hierarchy. Use the “active” state to
show users which page they have navigated to.
Keep the navigation links short. They can be shorter derivatives of page titles
themselves. If the navigation hierarchy is too long, users may miss items at the
bottom. If it’s too deep, users may miss items that require too many clicks. Usability
test to find the right balance between breadth and depth.
Figure 35: Sidebar Navigation
11 SECTION 508 COMPLIANCE
This is 508 overview provides a high level description of best practices for accessibility
requirements and issues. For more detailed information, consult the website Section 508
Standards for Electronic and Information Technology, (Board, 2000).
SEVP SYSTEM Style Guide
53
Meeting these best practices will aid assistive technologies in the presentation of Web site
content for disabled users.
11.1 Syntax validation
Contemporary, maintainable, accessible web design is based on complete separation of
structure (HTML) from style (CSS) with both conforming to W3C standards; valid code
contributes to accurate presentation by both standard browsers and assistive technologies.
11.2 Semantic validation
Page elements that function as links (including text, images, and buttons) should be
recognizable and usable by sighted viewers and assistive technology.
Remove broken links and empty links, these items are confusing to all users.
Users are helped by logically-organized page content that uses section headings and
sub-headings in their proper order; visitors using assistive technology can use the
headings for easy navigation between sections of the page.
A new browser window can be confusing to users because it will “break” the browser
back button. Best practice is to not open new windows. If opening a new window is
absolutely necessary, then Include link text that notifies the user that a new window is
being opened.
11.3 Alternate Text - Checkpoint (a)
"A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in
element content)."
Screen readers cannot interpret non-text elements, which are most often images, text
alternatives must be provided by using the HTML alt attribute.
Internet Explorer for Windows displays alt text as a tool tip that appears when you
hover over the element, even when the element itself is also displayed. However,
don't rely on this feature, as most other browsers don't display a tool tip for alt text. If
you need a tool tip (or equivalent) to appear, use the title attribute in addition to the
alt.
Purely decorative images (images that add no material value to those using assistive
technology) should be coded as alt="" (alt equals double-quote double-quote with no
spaces).
Multimedia elements should have text alternatives synchronized with its content.
SEVP SYSTEM Style Guide
54
11.4 Multimedia Equivalents - Checkpoint (b)
"Equivalent alternatives for any multimedia presentation shall be synchronized with the
presentation."
Captioning allows deaf people to comprehend multimedia with text. You must synchronize
captions for media such as video, audio, or animations.
11.5 Color - Checkpoint (c)
"Web pages shall be designed so that all information conveyed with color is also available
without color, for example from context or mark-up."
Section 508 guidelines do not discourage color, just the use of color to convey information.
11.6 CSS Style Sheets and Headings - Checkpoint (d)
"Documents shall be organized so they are readable without requiring an associated style
sheet."
Section 508 guidelines implicitly support the use of CSS style sheets, your application should
use them to help make the web pages accessible.
Make the web pages usable if the style sheet is turned off. This is because some
disabled users use their own style sheets to make text larger or to make the web site
display high contrast colors.
11.7 Server-Side Image Maps - Checkpoint (e)
"Redundant text links shall be provided for each active region of a server-side image map."
When you click on a hot area of a server-side image map, the server decides where to take
you. This poses problems for screen readers, since screen readers do not know where the link
goes, which means users of your application won't know as well.
Use client-side image maps wherever possible. If you must use server-side image
maps, include redundant links for each active region and locate the links next to or
below the image map.
The alt text is used to alert the user that alternate links are available for the server-
side image maps.
SEVP SYSTEM Style Guide
55
11.8 Client-Side Image Maps - Checkpoint (f)
"Client-side image maps shall be provided instead of server-side image maps except where the
regions cannot be defined with an available geometric shape. Client-side rather than server-
side image maps should be used unless there are limitations in creating hot spots in client-side
image maps tools/software."
Client-side image maps have clickable hot spots that act as links. Clicking on a different area
of the image takes users to a different place.
Label each of your hot spots with alt text to tell the screen reader where each hot spot
takes the user.
11.9 Simple Tables - Checkpoint (g)
"Row and column headers shall be identified for data tables."
Always have the tables' headings defined. This lets the screen reader know what it is reading
in each table.
Tables used only for layout should NEVER have row and column headers.
11.10 Complex Tables - Checkpoint (h)
"Mark-up shall be used to associate data cells and header cells for data tables that have two or
more logical levels of row or column headers."
Complicated data tables sometimes have more than one column or row header associated
with each column or row. In this case, the markup must tell the screen reader which headers
correspond to which column or row.
11.11 Frames - Checkpoint (i)
"Frames shall be titled with text that facilitates frame identification and navigation."
It is recommended that the use of frames be avoided. If used, every frame page must be titled
correctly, and the title should reflect the frames' contents.
The navigation frame should be called "navigation," the content frame should be
called "main content," and so on.
Frames are used by web designers to arrange content into distinct regions of a web page—
regions like menus, navigation panes, and main content. Frames are also used to insert
content into the page that can be updated independently from the rest of the page content.
SEVP SYSTEM Style Guide
56
When used accordingly iframes should follow rules for Section 508 compliance, (Affairs U. D.,
Tables, 2014).
11.12 Screen Flickering - Checkpoint (j)
"Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2
Hz and lower than 55 Hz."
People who have photosensitive epilepsy are susceptible to seizures if your web site contains
flashing elements. Flickering is usually annoying to all users, stay away from it all together.
If you must have flickering elements, make sure they meet the guidelines.
11.13 Provide Text Only Pages as a Last Resort - Checkpoint (k)
"A text only page, with equivalent information or functionality, shall be provided to make a web
site comply with the provisions of this part, when compliance cannot be accomplished in any
other way. The content of the text only page shall be updated whenever the primary page
changes."
Never resort to a text only pages before attempting to make them accessible.
11.14 Scripts - Checkpoint (l)
"When pages utilize scripting languages to display content, or to create interface elements, the
information provided by the script shall be identified with functional text that can be read by
assistive technology."
The most predominant scripting language for the web is JavaScript.
Avoid using scripts (most notably JavaScript) to generate content (especially
navigation such as dropdown menus). If there is no other option
The content generated by the scripting should be accessible with or without
JavaScript turned on, unless the content is purely decorative.
The content must be available to both mouse and keyboard users.
11.15 Provide Links to Necessary Plug-Ins - Checkpoint (m)
"When a web page requires that an applet, plug-in, or other application be present on the client
system to interpret page content, the page must provide a link to a plug-in or applet that
complies (a) through (l) checkpoints"
If your application requires users to download a plug-in before viewing your content, the
application must provide a link to the plug-in, and the link itself must comply with Section
SEVP SYSTEM Style Guide
57
508 guidelines. The web site that the plug-in resides in must follow Section 508 guidelines as
well.
11.16 Forms - Checkpoint (n)
"When electronic forms are designed to be completed on-line, the form shall allow people using
assistive technology to access the information, field elements, and functionality required for
completion and submission of the form, including all directions and cues."
Forms must be created with accessibility and usability in mind. There are a number of factors
that contribute to the accessibility and usability of forms, including layout, labeling and
grouping. Most of the factors mentioned were covered in the section Form Control in this
document.
When web users enter data and submit it, they’re using a form. Every form, no matter how
simple, comes with at least one form control. As long as the controls have been properly
marked up, AT can provide the user with excellent access to them. Follow the rules on how to
design each control to meet 508 requirements, (Affairs U. D., Forms, 2014).
11.17 Skip Repetitive Navigation Links - Checkpoint (o)
"A method shall be provided that permits users to skip repetitive navigation links."
If Navigation links are the first things that appear in your code, then the application have to
provide a skip navigation link. Sighted users can skip links by scanning past them on every
web page. A person using a screen reader or keyboard only navigation, however, would have
to go through each link manually to get to the main content section.
11.18 Timed Responses - Checkpoint (p)
"When a timed response is required, the user shall be alerted and given sufficient time to
indicate more time is required."
The application must communicate the users when their session is about to time out if you
employ this method. Disabled users may take longer to go through a Web site, so they should
have an option to request more time.
SEVP SYSTEM Style Guide
58
12 ASSISTIVE TECHNOLOGY
Anytime a government agency develops, procures, uses, or maintains electronic information,
it must make sure that the information is accessible to people with disabilities, as defined by
federal standards.
These standards are based on Section 508 of the Rehabilitation Act. Some standards spell out
what the content must include from a technical perspective. Others are functional, describing
methods of access that must be available to people with disabilities.
It is recommended to use a compliant framework such as the 18f or equivalent one which
addresses some of the barriers people with disabilities face when content is not accessible.
Accessible content is how easily a person with disability can locate and understand the
information they need but Section 508 refers to the law federal agencies must meet when
purchasing or developing electronic information.
Assistive technology (AT) enables people with disabilities to perform tasks that might
otherwise be difficult or impossible. AT products are designed to provide additional
accessibility to individuals who:
Are blind, or have vision impairments or color deficiencies.
Are deaf or hard of hearing, including those who need assistive hearing devices.
Are unable to speak or have speech impairments.
Have motor disabilities.
Have cognitive disabilities.
Have photosensitive epilepsy.
Have print disabilities such as dyslexia.
With AT, users can:
Listen as web pages are read to them.
Use refreshable braille to review electronic content.
Enlarge words and pictures.
Change background and foreground colors on a screen.
Use their voice to open a browser, pause a video, or fill out a form.
Navigate a web page without using a keyboard or mouse.
SEVP SYSTEM Style Guide
59
12.1 Page Structure
Developers for the government need to keep aware of the 508 requirements that each style
element discussed in this guide must meet. Structural elements form the building blocks of
HTML web pages including: page titles, headers, lists, and others. You’ll also learn the Section
508 requirements that each kind of element must meet. Assistive technology (AT) users rely
on a page’s structural elements to convey meaning and the framework may have the ability
to allow those users to adjust the page’s style sheets without changing its reading order,
(Affairs U. D., Page Structure, 2014).
12.2 Navigation and Keyboard Access
Web page content must be navigable by everyone, including people who use AT and people
who can’t use a mouse. Alternative keyboard access and navigation should be built into the
webpage. The framework may recommend compliant scripts, naming of links, and the ability
to skip past repetitive link groups, (Affairs U. D., Navigation and Keyboard Access, 2015).
12.3 Focus
Having a definitive focus on elements is vital for users with disabilities. Be cognizant of
unexpected focus changes, (Affairs U. D., Focus, 2014).
12.4 Rich Internet and Mobile Content
New, emerging technologies and rich Internet applications (RIAs) may require custom
treatment which may not be covered by the framework used. HTML5 techniques for mobile
users and the Accessible Rich Internet Application (ARIA) may be required, (Affairs U. D., Rich
Internet and Mobile Content, 2014).
SEVP SYSTEM Style Guide
60
13 REFERENCES
Accordions Are Not Always the Answer for Complex Content on Desktops. (2014, May 18). Retrieved from
Nielsen Norman Group: http://www.nngroup.com/articles/accordions-complex-content/
Affairs, U. D. (2014, July 17). Animation, Dynamic Content, Timed Responses and Flashing Content.
Retrieved from Testing HTML for Section 508 Compliance:
http://www.section508.va.gov/support/html/11_0.asp
Affairs, U. D. (2014, May 23). Color. Retrieved from Testing HTML for Section 508 Compliance:
http://www.section508.va.gov/support/html/3_0.asp
Affairs, U. D. (2014, May 30). Focus. Retrieved from Testing HTML for Section 508 Compliance:
http://www.section508.va.gov/support/html/6_0.asp
Affairs, U. D. (2014, July 17). Forms. Retrieved from Testing HTML for Section 508 Compliance:
http://www.section508.va.gov/support/html/10_0.asp
Affairs, U. D. (2014, July 17). Multimedia and Embedded Content. Retrieved from Testing HTML for
Section 508 Compliance: http://www.section508.va.gov/support/html/9_0.asp
Affairs, U. D. (2014, May 23). Page Structure. Retrieved from Testing HTML for Section 508 Compliance:
http://www.section508.va.gov/support/html/4_0.asp
Affairs, U. D. (2014, June 13). Rich Internet and Mobile Content. Retrieved from Testing HTML for
Section 508 Compliance: http://www.section508.va.gov/support/html/12_0.asp
Affairs, U. D. (2014, July 17). Tables. Retrieved from Testing HTML for Section 508 Compliance:
http://www.section508.va.gov/support/html/8_0.asp
Affairs, U. D. (2014, July 17). Tables. Retrieved from Testing HTML for Section 508 Compliance:
http://www.section508.va.gov/support/html/6_0.asp
Affairs, U. D. (2014, May 23). Text Equivalents for Non-Text Items. Retrieved from Testing HTML for
Section 508 Compliance: http://www.section508.va.gov/support/html/2_0.asp
Affairs, U. D. (2014, July 17). Text-Only and Alternative Content. Retrieved from Testing HTML for
Section 508 Compliance: http://www.section508.va.gov/support/html/13_0.asp
Affairs, U. D. (2015, March 10). Navigation and Keyboard Access. Retrieved from Testing HTML for
Section 508 Compliance: http://www.section508.va.gov/support/html/5_0.asp
SEVP SYSTEM Style Guide
61
Bacic, H. (2014, March 6). 10 Best Sans-Serif Web Fonts From Google Fonts Library. Retrieved from
http://www.forbes.com: http://www.forbes.com/sites/allbusiness/2014/03/06/10-best-sans-
serif-web-fonts-from-google-fonts-library/
Board, U. S. (2000, December 21). Section 508 Standards for Electronic and Information Technology.
Retrieved from United States Access Board: http://www.access-board.gov/guidelines-and-
standards/communications-and-it/about-the-section-508-standards/section-508-
standards#subpart_b
Community, 1. (2015). Form Controls. Retrieved from U.S. Web Design Standards:
https://playbook.cio.gov/designstandards/form-controls/
Community, 1. (2015). Grids. Retrieved from U.S. Web Design Standards:
https://playbook.cio.gov/designstandards/grids/
Community, 1. (2015). Tables. Retrieved from U.S. Web Design Standards:
https://playbook.cio.gov/designstandards/tables/
Community, 1. (2015). U.S. Web Design Standards. Retrieved from
https://playbook.cio.gov/designstandards/: https://playbook.cio.gov/designstandards/
Community, 1. (2015). Visual Style. Retrieved from U.S. Web Design Standards:
https://playbook.cio.gov/designstandards/visual-style/
Community, 1. (2015). Visual Style. Retrieved from U.S. Web Design Standards:
https://playbook.cio.gov/designstandards/visual-style/#colors
Community, W. (2015). Understanding Conformance. Retrieved from Understanding WCAG 2.0:
http://www.w3.org/TR/UNDERSTANDING-WCAG20/conformance.html
DHS. (2003, October). DHS House Style Guide. Retrieved from Computer Science and Mathematics
Division:
http://www.csm.ornl.gov/SC2007/pres/White_Collaborators_Judy/Collaborators%20logos/G
overnment/homeland%20security_DHS%20logo/DHS_HouseStyle_101703.pdf
Eggert, E. (2015, March 2). Image Maps. Retrieved from Web Accessibility Tutorials:
http://www.w3.org/WAI/tutorials/images/imagemap/
Enders, J. (2014, May 14). The Definitive Guide to Form Label Positioning. Retrieved from Sitepoint:
http://www.sitepoint.com/definitive-guide-form-label-positioning/
Farkas, D. (2000). Giudlines for Designing Web Navigation. Technical Communicaiton, 341-348.
SEVP SYSTEM Style Guide
62
Fieldsets, Legends and Screen Readers. (2007, November 22). Retrieved from The Paciello Group:
https://www.paciellogroup.com/blog/2007/11/fieldsets-legends-and-screen-readers/
Wroblewski, L. (2005, January 22). Web Application Form Design. Retrieved from
http://www.lukew.com/ff/entry.asp?1502